fix pagination in profile

src/routes/[perfil]/+page.svelte

@@ -38,6 +38,8 @@
 	$inspect(data);
 
 	let fetching = false;
+	// svelte-ignore state_referenced_locally
+	let currentProfile = $state(params.perfil);
 
 	async function obtenerPosts() {
 		if (fetching || finished) return;
@@ -46,15 +48,14 @@
 		cargando = true;
 
 		try {
-			
 			const res = await fetch(
-					`${$apiBase}/api/posts/user/${params.perfil}?page=${pageNumber}&pageSize=20`,
+				`${$apiBase}/api/posts/user/${params.perfil}?page=${pageNumber}&pageSize=20`,
-					{
+				{
-						headers: {
+					headers: {
-							Authorization: `Bearer ${$sesionStore?.accessToken}`
+						Authorization: `Bearer ${$sesionStore?.accessToken}`
-						}
 					}
-				);
+				}
+			);
 			const nuevosPosts: Post[] = await res.json();
 
 			if (nuevosPosts.length === 0) {
@@ -69,6 +70,8 @@
 			if (nuevosPosts.length < 20) {
 				finished = true;
 			}
+		} catch (error) {
+			mensajeError = 'Error al cargar los posts';
 		} finally {
 			fetching = false;
 			cargando = false;
@@ -76,24 +79,24 @@
 	}
 
 	$effect(() => {
-		params.perfil;
+		if (currentProfile !== params.perfil) {
+			currentProfile = params.perfil;
+			setPosts([]);
+			pageNumber = 1;
+			finished = false;
+			mensajeError = '';
+			fetching = false;
 
-		setPosts([]);
+			obtenerPosts();
-		pageNumber = 1;
+		}
-		finished = false;
-		mensajeError = '';
-
-		obtenerPosts();
 	});
 
 	$effect(() => {
-		if (!sentinel) return;
+		if (!sentinel || finished) return;
-
-		if (finished) return;
 
 		const observer = new IntersectionObserver(
 			([entry]) => {
-				if (entry.isIntersecting && !fetching) {
+				if (entry.isIntersecting && !fetching && !finished) {
 					obtenerPosts();
 				}
 			},
@@ -147,25 +150,27 @@
 		</h1>
 
 		<hr class="mb-8" />
-			{#if cargando && !finished}
+		{#if mensajeError !== ''}
-				<CardCargando />
+			<CardError {mensajeError} />
-			{:else if mensajeError !== ''}
+		{:else}
-				<CardError {mensajeError} />
+			<div class="flex flex-col gap-2">
-			{:else}
+				{#each $posts as post (post.id)}
-				<div class="flex flex-col gap-2">
+					<div transition:slide>
-					{#each $posts as post (post.id)}
+						<PostCard {post} bind:postAModificar />
-						<div transition:slide>
+					</div>
-							<PostCard {post} bind:postAModificar />
+				{/each}
-						</div>
-					{/each}
 
-					<div bind:this={sentinel} class="h-1"></div>
+				<div bind:this={sentinel} class="h-1"></div>
 
-					{#if cargando && !finished}
+				{#if cargando && !finished}
-						<CardCargando />
+					<CardCargando />
-					{/if}
+				{/if}
-				</div>
+				
-			{/if}
+				{#if finished && $posts.length === 0}
+					<p class="text-center text-muted-foreground">No hay posts para mostrar</p>
+				{/if}
+			</div>
+		{/if}
 	</div>
 </div>
 {#if postAModificar}

src/routes/[perfil]/+page.ts

@@ -1,12 +1,13 @@
 import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario.js';
-import type { User, UserResponseDto } from '../../types.js';
+import type {UserResponseDto } from '../../types.js';
 import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
 import { obtenerSeguidosPorUsuario } from '@/hooks/obtenerSeguidosPorUsuario.js';
 import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario.js';
 import { obtenerCantidadDeSeguidores } from '@/hooks/obtenerCantidadDeSeguidores.js';
 import { obtenerCantidadDeSeguidos } from '@/hooks/obtenerCantidadDeSeguidos.js';
 
-export async function load({ params, depends, fetch }) {
+export const load: PageLoad = async ({ params, depends, fetch }) => {
 	depends('perfil:general');
 	const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil, fetch);
 	if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil);
@@ -25,4 +26,4 @@ export async function load({ params, depends, fetch }) {
 		countSeguidores: countSeguidores.count,
 		countSeguidos: countSeguidos.count
 	};
-}
+};

src/routes/[perfil]/seguidos/+page.ts

@@ -1,9 +1,10 @@
 import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario';
 import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
 import type { UserResponseDto, UsersResponseDto } from '../../../types';
 import { obtenerSeguidosPorUsuario } from '@/hooks/obtenerSeguidosPorUsuario';
 
-export async function load({ params, fetch }) {
+export const load: PageLoad = async ({ params, fetch }) => {
 	const usuario: UserResponseDto | null = await obtenerUsuarioPorUsername(params.perfil, fetch);
 	if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil);
 
@@ -17,4 +18,4 @@ export async function load({ params, fetch }) {
 		usuario,
 		seguidos: seguidosResponse?.response || []
 	};
-}
+};