From 4370d1cd9a93712e9f16d9b886069b79b3ec4c9c Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Fri, 28 Mar 2025 15:30:23 +0300
Subject: [PATCH 1/3] feat: add animation to splashScreen

---
 infrastructure/eid-wallet/src/app.html        |  1 +
 .../SplashScreen/SplashScreen.svelte          | 21 +++++++++++++++++++
 .../src/lib/ui/Drawer/Drawer.svelte           |  2 +-
 .../eid-wallet/src/routes/+layout.svelte      | 17 ++++++---------
 4 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte

diff --git a/infrastructure/eid-wallet/src/app.html b/infrastructure/eid-wallet/src/app.html
index 92e7e333..33600a68 100644
--- a/infrastructure/eid-wallet/src/app.html
+++ b/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>
diff --git a/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte b/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte
new file mode 100644
index 00000000..1b75bb6f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte b/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
index e804ff30..0af52cf9 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
+++ b/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";
 
diff --git a/infrastructure/eid-wallet/src/routes/+layout.svelte b/infrastructure/eid-wallet/src/routes/+layout.svelte
index eee438f5..3d8785f7 100644
--- a/infrastructure/eid-wallet/src/routes/+layout.svelte
+++ b/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}
\ No newline at end of file

From 272dc96d0525b8971a0fbcbc7af5ff82cbeae418 Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Fri, 28 Mar 2025 16:02:10 +0300
Subject: [PATCH 2/3] feat: implement data loading logic with splash screen
 delay

---
 .../eid-wallet/src/routes/+layout.svelte      | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/infrastructure/eid-wallet/src/routes/+layout.svelte b/infrastructure/eid-wallet/src/routes/+layout.svelte
index 3d8785f7..e6de48be 100644
--- a/infrastructure/eid-wallet/src/routes/+layout.svelte
+++ b/infrastructure/eid-wallet/src/routes/+layout.svelte
@@ -1,21 +1,33 @@
 <script lang="ts">
 import SplashScreen from "$lib/fragments/SplashScreen/SplashScreen.svelte";
-import ButtonAction from "$lib/ui/Button/ButtonAction.svelte";
+import { onMount } from "svelte";
 import "../app.css";
+
 const { children } = $props();
 
 let showSplashScreen = $state(false);
 
-$effect(() => {
-	showSplashScreen = true; // needs to happen this way to kickstart the animation
-	setTimeout(() => {
-		showSplashScreen = false;
-	}, 1000);
+// 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));
+}
+
+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}
     <SplashScreen />
 {:else}
     {@render children?.()}
-{/if}
\ No newline at end of file
+{/if}
+    
\ No newline at end of file

From 21796c8fecdb222e9de8139c092fb82a36afec73 Mon Sep 17 00:00:00 2001
From: JulienAuvo <julien@auvo.io>
Date: Fri, 28 Mar 2025 16:06:55 +0300
Subject: [PATCH 3/3] chore: sort import

---
 .../src/lib/fragments/SplashScreen/SplashScreen.svelte        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte b/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte
index 1b75bb6f..d344a848 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-import { cubicInOut, cubicOut } from "svelte/easing";
-import { fade, slide, scale } from "svelte/transition";
+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" >