feat: spinner rocket

Signed-off-by: David Dal Busco <[email protected]>

src/frontend/src/lib/components/icons/IconRocket.svelte

@@ -0,0 +1,16 @@
+<!-- Fontawesome v5 - David Pro license -->
+<script lang="ts">
+	export let size = '40px';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 512 512"
+	height={size}
+	width={size}
+	style={`min-width: ${size}`}
+	fill="currentColor"
+	><path
+		d="M505.1 19.3C503.9 13.7 498.3 8.2 492.7 7c-32.6-7-58.2-7-83.6-7C305.4 0 243 55.1 196.2 128H94.8c-16.3 0-35.5 11.9-42.9 26.5L2.5 253.3A28.1 28.1 0 0 0 0 264a24 24 0 0 0 24 24h92.6l-10.6 21.4c-9.3 18.9 4.3 34.8 6.2 36.6l53.8 53.7c1.9 1.9 17.8 15.5 36.6 6.1l21.4-10.6V488a24.1 24.1 0 0 0 24 24 28 28 0 0 0 10.6-2.5l98.7-49.4c14.6-7.3 26.5-26.5 26.5-42.9V315.7C456.6 268.9 512 206.3 512 103 512.1 77.5 512.1 52 505.1 19.3zM36.9 256l43.6-87.2c2.5-4.8 8.8-8.8 14.3-8.8h85.2c-13.9 28.1-31.7 64-47.6 96zM351.8 417.2c0 5.4-4 11.8-8.9 14.3L256 475V379.5c32-15.8 67.8-33.6 95.9-47.5zm14.6-128.3c-39.5 19.8-135.9 67.4-177.9 88.2l-53.8-53.5c20.9-42.2 68.5-138.6 88.2-178.2C273.2 67 330.7 32 409.2 32c21.5 0 42 0 66.6 4.3 4.3 24.9 4.3 45.2 4.2 66.7C480 181.1 445 238.5 366.5 288.9zM368 88a56 56 0 1 0 56 56A56 56 0 0 0 368 88zm0 80a24 24 0 1 1 24-24A24 24 0 0 1 368 168z"
+	/></svg
+>

src/frontend/src/lib/components/modals/SatelliteCreateModal.svelte

@@ -76,7 +76,7 @@
 			<button on:click={navigate}>{$i18n.core.continue}</button>
 		</div>
 	{:else if steps === 'in_progress'}
-		<SpinnerModal>
+		<SpinnerModal icon="satellite">
 			<p>{$i18n.satellites.initializing}</p>
 		</SpinnerModal>
 	{:else}

src/frontend/src/lib/components/ui/Spinner.svelte

@@ -1,15 +1,19 @@
-<!-- adapted from pen: https://codepen.io/mimoh/pen/VmVqPB -->
 <script lang="ts">
 	import IconSatellite from '$lib/components/icons/IconSatellite.svelte';
+	import type { ComponentType } from 'svelte';
+	import IconRocket from '$lib/components/icons/IconRocket.svelte';
 
 	// Source of the animation: https://codepen.io/nelledejones/pen/gOOPWrK
 	export let animation: 'gelatine' | 'swing' = 'gelatine';
-
+	export let icon: 'satellite' | 'rocket' = 'rocket';
 	export let small = false;
+
+	let iconCmp: ComponentType;
+	$: iconCmp = icon === 'satellite' ? IconSatellite : IconRocket;
 </script>
 
 <div class="spinner" class:swing={animation === 'swing'} class:gelatine={animation === 'gelatine'}>
-	<IconSatellite size={small ? '16px' : '40px'} />
+	<svelte:component this={iconCmp} size={small ? '16px' : '40px'} />
 </div>
 
 <style lang="scss">

src/frontend/src/lib/components/ui/SpinnerModal.svelte

@@ -3,12 +3,14 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { confirmToCloseBrowser } from '$lib/utils/before-unload.utils';
 
+	export let icon: 'satellite' | 'rocket' = 'rocket';
+
 	onMount(() => confirmToCloseBrowser(true));
 	onDestroy(() => confirmToCloseBrowser(false));
 </script>
 
 <div class="msg">
-	<Spinner />
+	<Spinner {icon} />
 
 	<slot />
 </div>