fix(front): load animation

CETEN-OpenBar · Aug 11, 2023 · db5ddb7 · db5ddb7
1 parent ecde7af
commit db5ddb7
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 6 deletions.
diff --git a/frontend/src/lib/components/borne/fs_loading.svelte b/frontend/src/lib/components/borne/fs_loading.svelte
@@ -1,11 +1,50 @@
+
 <div class="fixed inset-0 flex items-center justify-center z-50">
-    <div class="flex flex-col">
-        <h1 class="text-2xl font-bold mb-4 animate-pulse">Chargement du bar</h1>
+    <div class="flex flex-col roll-in-bottom">
+        <h1 class="text-2xl font-bold mb-4">Chargement du bar...</h1>
         <div class="self-center animate-spin rounded-full h-16 w-16 border-t-4 border-blue-500" />
     </div>
 </div>
 
 <style>
+
+
+	/* ----------------------------------------------
+ * Generated by Animista on 2023-8-12 0:34:45
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info. 
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+	@-webkit-keyframes roll-in-bottom {
+		0% {
+			-webkit-transform: translateY(800px) rotate(540deg);
+			transform: translateY(800px) rotate(540deg);
+			opacity: 0;
+		}
+		100% {
+			-webkit-transform: translateY(0) rotate(0deg);
+			transform: translateY(0) rotate(0deg);
+			opacity: 1;
+		}
+	}
+	@keyframes roll-in-bottom {
+		0% {
+			-webkit-transform: translateY(800px) rotate(540deg);
+			transform: translateY(800px) rotate(540deg);
+			opacity: 0;
+		}
+		100% {
+			-webkit-transform: translateY(0) rotate(0deg);
+			transform: translateY(0) rotate(0deg);
+			opacity: 1;
+		}
+	}
+
+	.roll-in-bottom {
+		-webkit-animation: roll-in-bottom 1s ease-out both;
+		animation: roll-in-bottom 1s ease-out both;
+	}
 	/* Style for the loading animation */
 	@keyframes spin {
 		to {

diff --git a/frontend/src/routes/borne/+page.svelte b/frontend/src/routes/borne/+page.svelte
@@ -14,6 +14,7 @@
 	import { goto } from '$app/navigation';
 	import FsLoading from '$lib/components/borne/fs_loading.svelte';
 	import { api } from '$lib/config/config';
+	import { fly } from 'svelte/transition';
 
 	let fakeImages: Array<CarouselImage> = [
 		{
@@ -64,7 +65,7 @@
 				Promise.all(images.map((x) => preloadImage(api() + x.image_url))).finally(() => {
 					setTimeout(() => {
 						display = true;
-					}, 500);
+					}, 1500);
 				});
 			});
 
@@ -137,7 +138,9 @@
 {/if}
 
 {#if display}
-	<Carousel {images} {texts} />
+	<div in:fly={{ x: -1000, duration: 1000 }}>
+		<Carousel {images} {texts} />
+	</div>
 {:else}
 	<FsLoading />
 {/if}
diff --git a/frontend/src/routes/comptoir/+page.svelte b/frontend/src/routes/comptoir/+page.svelte
@@ -9,6 +9,7 @@
 	import { goto } from '$app/navigation';
 	import FsLoading from '$lib/components/borne/fs_loading.svelte';
 	import { api } from '$lib/config/config';
+	import { fly } from 'svelte/transition';
 
 	let fakeImages: Array<CarouselImage> = [
 		{
@@ -59,7 +60,7 @@
 				Promise.all(images.map((x) => preloadImage(api() + x.image_url))).finally(() => {
 					setTimeout(() => {
 						display = true;
-					}, 500);
+					}, 1500);
 				});
 			});
 
@@ -136,8 +137,11 @@
 	<Pin callback={pinCallback} />
 {/if}
 
+
 {#if display}
-	<Carousel {images} {texts} />
+	<div in:fly={{ x: -1000, duration: 1000 }}>
+		<Carousel {images} {texts} />
+	</div>
 {:else}
 	<FsLoading />
 {/if}