fede/minix-front
1
0
Fork 0
mirror of https://github.com/emailerfacu-spec/minix-front.git synced 2026-04-01 13:10:44 -03:00
Code Issues Packages Projects Releases Wiki Activity

fix: bug que al inicio no se cargaban los posts

Browse Source
This commit is contained in:
fedpo
2026-02-04 23:35:41 -03:00
parent 85477ffe7e
commit 7b91483514
4 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/head/Header.svelte
View File

@@ -50,13 +50,13 @@
<header class="border-b bg-background/95 backdrop-blur"> <header class="border-b bg-background/95 backdrop-blur">
<div class="mx-4 ms-2 flex h-12 items-center justify-between"> <div class="mx-4 ms-2 flex h-12 items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<a data-sveltekit-preload-data={false} href="/" class="mr-6 flex items-center space-x-2"> <button class="mr-6 flex items-center space-x-2" onclick={() => (window.location.href = '/')}>
<Avatar <Avatar
class="h-8 w-8 transform rounded-sm! transition-transform duration-300 ease-in-out hover:scale-130 hover:rotate-12" class="h-8 w-8 transform rounded-sm! transition-transform duration-300 ease-in-out hover:scale-130 hover:rotate-12"
> >
<AvatarImage src="/x.png" alt="minix" /> <AvatarImage src="/x.png" alt="minix" />
</Avatar> </Avatar>
</a> </button>
<!-- <nav class="me-2 items-center space-x-6 text-sm font-medium md:flex"> <!-- <nav class="me-2 items-center space-x-6 text-sm font-medium md:flex">
<ButtonTheme /> <ButtonTheme />
</nav> --> </nav> -->

2
src/lib/hooks/loadMorePosts.ts
View File

@@ -1,5 +1,5 @@
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import { page, loadingPosts, PAGE_SIZE } from '@/stores/posts'; import { page, loadingPosts, PAGE_SIZE, resetPosts } from '@/stores/posts';
import { appendPosts } from '@/stores/posts'; import { appendPosts } from '@/stores/posts';
import { getPosts } from './getPosts'; import { getPosts } from './getPosts';

2
src/lib/stores/posts.ts
View File

@@ -1,7 +1,7 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import type { Post } from '../../types'; import type { Post } from '../../types';
export const posts = writable<Post[]>([]); export const posts = writable<Post[] | null>(null);
export const loadingPosts = writable(false); export const loadingPosts = writable(false);
export const page = writable(1); export const page = writable(1);

12
src/routes/+page.svelte
View File

@@ -20,6 +20,8 @@
let mensajeError = $state(''); let mensajeError = $state('');
let sentinel: HTMLDivElement; let sentinel: HTMLDivElement;
$inspect($posts);
resetPosts(); resetPosts();
$effect(() => { $effect(() => {
loadMorePosts(); loadMorePosts();
@@ -78,19 +80,13 @@
{/if} {/if}
<hr /> <hr />
{#if $posts.length === 0 && $loadingPosts} {#if $posts === null || $posts.length === 0}
<Card> <Card>
<Content class="flex items-center justify-center gap-2"> <Content class="flex items-center justify-center gap-2">
<Spinner class="h-10 w-10" /> <Spinner class="h-10 w-10" />
<p>Cargando</p> <p>Cargando</p>
</Content> </Content>
</Card> </Card>
{:else if $posts.length === 0}
<Card>
<Content>
<p class="text-center leading-7">No hay Posts que mostrar</p>
</Content>
</Card>
{:else} {:else}
{#each $posts as post (post.id)} {#each $posts as post (post.id)}
<div transition:slide> <div transition:slide>
@@ -101,7 +97,7 @@
</div> </div>
<div bind:this={sentinel} class="h-1"></div> <div bind:this={sentinel} class="h-1"></div>
{#if $loadingPosts && $posts.length > 0} {#if $loadingPosts && $posts!.length > 0}
<div class="flex justify-center py-4"> <div class="flex justify-center py-4">
<Spinner /> <Spinner />
</div> </div>