feat: add animation to splashScreen

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 { cubicInOut, cubicOut } from "svelte/easing";
+import { fade, slide, 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,21 @@
 <script lang="ts">
+import SplashScreen from "$lib/fragments/SplashScreen/SplashScreen.svelte";
+import ButtonAction from "$lib/ui/Button/ButtonAction.svelte";
 import "../app.css";
 const { children } = $props();
 
-let showSplashScreen = $state(true);
+let showSplashScreen = $state(false);
 
 $effect(() => {
+	showSplashScreen = true; // needs to happen this way to kickstart the animation
 	setTimeout(() => {
 		showSplashScreen = false;
-	}, 500);
+	}, 1000);
 });
 </script>
 
 {#if showSplashScreen}
-    <div class="relative w-full h-[100vh] 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}