From d57f999b16c12a64ac1f88cf16085592fbd411c5 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Thu, 16 May 2024 17:43:06 +0200
Subject: [PATCH] feat: use satellite icon for spinner

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>
---
 .../lib/components/launchpad/Launchpad.svelte |  4 +-
 .../src/lib/components/ui/Spinner.svelte      | 82 ++++++++++---------
 .../src/lib/components/ui/SpinnerModal.svelte |  3 +-
 .../lib/components/ui/SpinnerParagraph.svelte |  2 +-
 4 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/src/frontend/src/lib/components/launchpad/Launchpad.svelte b/src/frontend/src/lib/components/launchpad/Launchpad.svelte
index 7d8b84e46..e3b706984 100644
--- a/src/frontend/src/lib/components/launchpad/Launchpad.svelte
+++ b/src/frontend/src/lib/components/launchpad/Launchpad.svelte
@@ -30,7 +30,7 @@
 {#if loading || ($satellitesStore?.length ?? 0n) === 0}
 	{#if loading}
 		<div class="spinner" out:fade>
-			<Spinner inline />
+			<Spinner />
 
 			<p>{$i18n.satellites.loading_launchpad}</p>
 		</div>
@@ -92,7 +92,5 @@
 		justify-content: center;
 		align-items: center;
 		gap: var(--padding-2x);
-
-		font-size: var(--font-size-very-small);
 	}
 </style>
diff --git a/src/frontend/src/lib/components/ui/Spinner.svelte b/src/frontend/src/lib/components/ui/Spinner.svelte
index f584d0f0b..c78d3a879 100644
--- a/src/frontend/src/lib/components/ui/Spinner.svelte
+++ b/src/frontend/src/lib/components/ui/Spinner.svelte
@@ -1,57 +1,65 @@
 <!-- adapted from pen: https://codepen.io/mimoh/pen/VmVqPB -->
 <script lang="ts">
-	export let inline = false;
+	import IconSatellite from '$lib/components/icons/IconSatellite.svelte';
+
+	// Source of the animation: https://codepen.io/nelledejones/pen/gOOPWrK
+	export let animation: 'gelatine' | 'swing' = 'gelatine';
+
+	export let small = false;
 </script>
 
-<div class="spinner" class:inline />
+<div class="spinner" class:swing={animation === 'swing'} class:gelatine={animation === 'gelatine'}>
+	<IconSatellite size={small ? '16px' : '40px'} />
+</div>
 
 <style lang="scss">
 	@use '../../styles/mixins/media';
 
-	@include media.dark-theme {
-		.spinner {
-			border-color: var(--text-color);
+	/* -global- */
+	@keyframes -global-gelatine {
+		from,
+		to {
+			transform: scale(1, 1);
 		}
-	}
-
-	@include media.light-theme {
-		.spinner.inline {
-			border-color: var(--color-primary);
+		25% {
+			transform: scale(0.9, 1.1);
 		}
-	}
-
-	.spinner {
-		display: block;
-
-		background: transparent;
-		border: var(--spinner-border-size, 2px) solid var(--label-color);
-
-		margin: var(--spinner-margin);
-
-		width: var(--spinner-size);
-		height: var(--spinner-size);
-
-		border-radius: var(--border-radius);
-
-		&:not(.inline) {
-			position: absolute;
-			top: calc(50% - (var(--spinner-size) / 2));
-			left: calc(50% - (var(--spinner-size) / 2));
+		50% {
+			transform: scale(1.1, 0.9);
+		}
+		75% {
+			transform: scale(0.95, 1.05);
 		}
-
-		animation: spinner-rotate 1.2s infinite linear;
 	}
 
 	/* -global- */
-	@keyframes -global-spinner-rotate {
-		0% {
-			transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+	@keyframes -global-swing {
+		20% {
+			transform: rotate(15deg);
 		}
-		50% {
-			transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+		40% {
+			transform: rotate(-10deg);
+		}
+		60% {
+			transform: rotate(5deg);
+		}
+		80% {
+			transform: rotate(-5deg);
 		}
 		100% {
-			transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+			transform: rotate(0deg);
 		}
 	}
+
+	.gelatine {
+		animation: gelatine 0.5s infinite;
+	}
+
+	.swing {
+		animation: swing 2s ease infinite;
+	}
+
+	.spinner {
+		display: inline-flex;
+	}
 </style>
diff --git a/src/frontend/src/lib/components/ui/SpinnerModal.svelte b/src/frontend/src/lib/components/ui/SpinnerModal.svelte
index 33ecf6084..62b50266b 100644
--- a/src/frontend/src/lib/components/ui/SpinnerModal.svelte
+++ b/src/frontend/src/lib/components/ui/SpinnerModal.svelte
@@ -8,7 +8,8 @@
 </script>
 
 <div class="msg">
-	<Spinner inline />
+	<Spinner />
+
 	<slot />
 </div>
 
diff --git a/src/frontend/src/lib/components/ui/SpinnerParagraph.svelte b/src/frontend/src/lib/components/ui/SpinnerParagraph.svelte
index 5da974581..0d06ddd7f 100644
--- a/src/frontend/src/lib/components/ui/SpinnerParagraph.svelte
+++ b/src/frontend/src/lib/components/ui/SpinnerParagraph.svelte
@@ -2,7 +2,7 @@
 	import Spinner from '$lib/components/ui/Spinner.svelte';
 </script>
 
-<p class="label loading"><slot /> <Spinner inline /></p>
+<p class="label loading"><slot /> <Spinner small animation="swing" /></p>
 
 <style lang="scss">
 	.loading {