ahora muestra estado de carga

src/lib/stores/posts.ts

@@ -1,7 +1,7 @@
 import { writable } from 'svelte/store';
 import type { Post } from '../../types';
 
-export const posts = writable<Post[]>([]);
+export const posts = writable<Post[]>(undefined);
 
 export const setPosts = (newPosts: Post[]) => {
 	posts.set(newPosts);

src/routes/+page.svelte

@@ -10,6 +10,7 @@
 	import { updatePost } from '@/hooks/updatePost';
 	import { fade, slide } from 'svelte/transition';
 	import { getPosts } from '@/hooks/getPosts';
+	import Spinner from '@/components/ui/spinner/spinner.svelte';
 
 	$effect(() => {
 		(async () => {
@@ -49,7 +50,14 @@
 			{/if}
 			<hr />
 
-			{#if $posts.length <= 0}
+			{#if $posts === undefined}
+				<Card>
+					<Content class="flex items-center justify-center gap-2">
+						<Spinner class="h-10 w-10" />
+						<p>Cargando</p>
+					</Content>
+				</Card>
+			{:else if $posts.length <= 0}
 				<Card>
 					<Content>
 						<p class=" text-center leading-7 not-first:mt-6">No hay Posts que mostrar</p>