feat: splash-screen (#187)

Author: grv-saini-20

platforms/metagram/src/lib/dummyData.ts

@@ -6,9 +6,9 @@ export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
 	username: `user${i + 1}`,
 	imgUri: [
 		'https://picsum.photos/800',
-		'https://picsum.photos/200',
+		'https://picsum.photos/600',
 		'https://picsum.photos/800',
-		'https://picsum.photos/200'
+		'https://picsum.photos/600'
 	],
 	postAlt: 'Sample',
 	text: `This is post number ${i + 1}. Loving how these shots came out! 📸`,

platforms/metagram/src/routes/+layout.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { onNavigate } from '$app/navigation';
 	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
+	import { onMount } from 'svelte';
 	import '../app.css';
 
 	let { children } = $props();
 
 	let previousRoute = null;
+	let showSplashScreen = $state(true);
 
 	onNavigate((navigation) => {
 		if (!document.startViewTransition) return;
@@ -32,8 +34,20 @@
 			});
 		});
 	});
+	
+	onMount(() => {
+		setTimeout(() => {
+			showSplashScreen = false;
+		}, 2500)
+	})
 </script>
 
+{#if showSplashScreen}
+<main class="h-[100dvh] w-full grid items-center justify-center">
+	<img src="/images/Logo.svg" alt="logo">
+</main>
+{:else}
 <main class="h-[100dvh] overflow-hidden px-4 md:px-0">
 	{@render children()}
 </main>
+{/if}