Feat/splashscreen animation (#81)

* feat: add animation to splashScreen

* feat: implement data loading logic with splash screen delay

* chore: sort import

Author: JulienAuvo

infrastructure/eid-wallet/src/app.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preload" href="/fonts/Archivo-VariableFont_wdth,wght.ttf" as="font" type="truetype" crossorigin="anonymous">
     <title>Tauri + SvelteKit + Typescript App</title>
     %sveltekit.head%
   </head>

infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+import { cubicOut } from "svelte/easing";
+import { fade, scale } from "svelte/transition";
+</script>
+
+<div  out:fade={{duration: 150}} class="z-50 absolute w-screen h-screen overflow-hidden" >
+    <div  class="relative w-screen h-screen bg-primary overflow-hidden">
+
+        <img in:scale={{start: 0.8, duration: 500, easing: cubicOut, opacity: 1 }} class="absolute w-full bottom-[-80px] start-0" src="/images/Shape1.svg" alt="illustration">
+        <img in:scale={{start: 0.8, duration: 500, easing: cubicOut, opacity: 1 }} class="absolute w-full top-[50px] end-[100px]" src="/images/Shape2.svg" alt="illustration">
+        <div in:scale={{start: 0.9, duration: 500, easing: cubicOut, opacity: 1 }}  class="absolute w-full top-[42%] start-[50%] translate-x-[-50%] translate-y-[-42%]">
+            <h1 in:fade={{duration: 500}} class="text-center text-white text-[44px]">eAgency</h1>
+            <p in:fade={{duration: 500}} class="text-center text-white">Your self-sovereign digital entity</p>
+        </div>
+        <img in:fade={{duration: 500}} class="absolute bottom-[116px] start-[50%] translate-x-[-50%]" src="/images/W3DSLogoWhite.svg" alt="logo">
+    </div>
+</div>
+
+<style>
+
+</style>

infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { clickOutside, cn } from "$lib/utils";
 import { CupertinoPane } from "cupertino-pane";
-import { type Snippet } from "svelte";
+import type { Snippet } from "svelte";
 import { swipe } from "svelte-gestures";
 import type { HTMLAttributes } from "svelte/elements";
 

infrastructure/eid-wallet/src/routes/+layout.svelte

@@ -1,26 +1,33 @@
 <script lang="ts">
+import SplashScreen from "$lib/fragments/SplashScreen/SplashScreen.svelte";
+import { onMount } from "svelte";
 import "../app.css";
+
 const { children } = $props();
 
-let showSplashScreen = $state(true);
+let showSplashScreen = $state(false);
+
+// replace with actual data loading logic
+async function loadData() {
+	await new Promise((resolve) => setTimeout(resolve, 1500));
+}
+
+async function ensureMinimumDelay() {
+	await new Promise((resolve) => setTimeout(resolve, 500));
+}
 
-$effect(() => {
-	setTimeout(() => {
-		showSplashScreen = false;
-	}, 500);
+onMount(async () => {
+	showSplashScreen = true; // Can't set up the original state to true or animation won't start
+
+	await Promise.all([loadData(), ensureMinimumDelay()]);
+
+	showSplashScreen = false;
 });
 </script>
-
+    
 {#if showSplashScreen}
-    <div class="relative w-full h-screen bg-primary">
-        <img class="absolute w-full bottom-[-80px] start-0" src="/images/Shape1.svg" alt="illustration">
-        <img class="absolute w-full top-[50px] end-[100px]" src="/images/Shape2.svg" alt="illustration">
-        <div class="absolute w-full top-[42%] start-[50%] translate-x-[-50%] translate-y-[-42%]">
-            <h1 class="text-center text-white text-[44px]">eAgency</h1>
-            <p class="text-center text-white">Your self-sovereign digital entity</p>
-        </div>
-        <img class="absolute bottom-[116px] start-[50%] translate-x-[-50%]" src="/images/W3DSLogoWhite.svg" alt="logo">
-    </div>
+    <SplashScreen />
 {:else}
     {@render children?.()}
-{/if}
+{/if}
+