From 1ce2148a98814eb12bd0808bc6aa58e7c1315cc8 Mon Sep 17 00:00:00 2001
From: fede <federico.nicolas.polidoro@gmail.com>
Date: Fri, 26 Dec 2025 12:01:31 -0300
Subject: [PATCH] ahora muestra estado de carga

---
 src/lib/stores/posts.ts |  2 +-
 src/routes/+page.svelte | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/stores/posts.ts b/src/lib/stores/posts.ts
index 185c5a5..34ed653 100644
--- a/src/lib/stores/posts.ts
+++ b/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);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 50ac318..f12827f 100644
--- a/src/routes/+page.svelte
+++ b/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>