add pagination in following and followers

src/lib/components/UserCard.svelte

@@ -35,8 +35,5 @@
 				<BotonSeguir post={{ authorId: usu.id }} />
 			</div>
 		</div>
-		{#if usu.bio}
-			<div class="mt-4 rounded-full bg-accent p-4 text-muted-foreground">{usu.bio}</div>
-		{/if}
 	</CardContent>
 </Card>

src/lib/hooks/obtenerSeguidoresPorUsuario.ts

@@ -1,16 +1,19 @@
 import { sesionStore } from '@/stores/usuario';
 import type { UsersResponseDto } from '../../types';
-import { get } from 'svelte/store';
 import { apiBase } from '@/stores/url';
+import { get } from 'svelte/store';
 
 export async function obtenerSeguidoresPorUsuario(
 	id: string,
+	page: number = 1,
 	limit: number = 20,
-	fetch2: Function
+	fetch2?: Function
 ): Promise<UsersResponseDto | null> {
 	try {
 		const fetchFunc = fetch2 || fetch;
-		const response = await fetchFunc(`${get(apiBase)}/api/users/${id}/followers?limit=${limit}`, {
+		const skip = (page - 1) * limit;
+
+		const response = await fetchFunc(`${get(apiBase)}/api/users/${id}/followers?skip=${skip}&limit=${limit}`, {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',

src/lib/hooks/obtenerSeguidosPorUsuario.ts

@@ -5,13 +5,15 @@ import { get } from 'svelte/store';
 
 export async function obtenerSeguidosPorUsuario(
 	id: string,
+	page: number = 1,
 	limit: number = 20,
 	fetch2?: Function
 ): Promise<UsersResponseDto | null> {
 	try {
 		const fetchFunc = fetch2 || fetch;
+		const skip = (page - 1) * limit;
 
-		const response = await fetchFunc(`${get(apiBase)}/api/users/${id}/following?limit=${limit}`, {
+		const response = await fetchFunc(`${get(apiBase)}/api/users/${id}/following?skip=${skip}&limit=${limit}`, {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json',
@@ -23,8 +25,8 @@ export async function obtenerSeguidosPorUsuario(
 			return null;
 		}
 
-		const users: UsersResponseDto = await response.json();
+		const data: UsersResponseDto = await response.json();
-		return users;
+		return data;
 	} catch (error) {
 		return null;
 	}

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

@@ -13,8 +13,8 @@ export const load: PageLoad = async ({ params, depends, fetch }) => {
 	if (!usuario) error(404, 'No se encontro el usuario, ' + params.perfil);
 
 	const [seguidos, seguidores, countSeguidores, countSeguidos] = await Promise.all([
-		obtenerSeguidosPorUsuario(usuario.id, 5, fetch),
+		obtenerSeguidosPorUsuario(usuario.id, 1, 5, fetch),
-		obtenerSeguidoresPorUsuario(usuario.id, 5, fetch),
+		obtenerSeguidoresPorUsuario(usuario.id, 1, 5, fetch),
 		obtenerCantidadDeSeguidores(usuario.id, fetch),
 		obtenerCantidadDeSeguidos(usuario.id, fetch)
 	]);

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

@@ -1,15 +1,41 @@
 <script lang="ts">
 	import ArrowLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import type { UserResponseDto } from '../../../types';
 	import UserCard from '@/components/UserCard.svelte';
 	import { goto } from '$app/navigation';
+	import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario';
 
 	type Data = {
 		usuario: UserResponseDto;
 		seguidores: UserResponseDto[];
+		totalCount: number;
 	};
 
 	let { data }: { data: Data } = $props();
+	
+	let currentPage = $state(1);
+	let isLoading = $state(false);
+	const limit = 100;
+
+	let totalPages = $derived(Math.ceil(data.totalCount / limit));
+
+	async function loadPage(page: number) {
+		if (isLoading) return;
+		
+		isLoading = true;
+		const response = await obtenerSeguidoresPorUsuario(data.usuario.id, page, limit);
+		
+		if (response) {
+			data.seguidores = response.response as UserResponseDto[];
+			data.totalCount = response.totalCount;
+			currentPage = page;
+		}
+		
+		isLoading = false;
+	}
+
 </script>
 
 <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
@@ -25,9 +51,14 @@
 				<ArrowLeft />
 			</button>
 		</div>
-		{#if data.seguidores.length === 0}
+		
+		{#if isLoading}
 			<div class="py-8 text-center text-muted-foreground">
-				<p>No hay seguidores para mostrar.</p>
+				<p>Cargando...</p>
+			</div>
+		{:else if data.seguidores.length === 0}
+			<div class="py-8 text-center text-muted-foreground">
+				<p>No hay seguidos para mostrar.</p>
 			</div>
 		{:else}
 			<div class="flex flex-col sm:grid" style="grid-template-columns: repeat(2, 1fr); gap: 1rem;">
@@ -38,5 +69,29 @@
 				{/each}
 			</div>
 		{/if}
+
+		{#if totalPages > 1}
+			<div class="mt-6 flex items-center justify-center gap-2">
+				<button
+					class="rounded-md border bg-card p-2 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+					onclick={() => loadPage(currentPage - 1)}
+					disabled={currentPage === 1 || isLoading}
+				>
+					<ChevronLeft class="h-5 w-5" />
+				</button>
+				
+				<span class="px-4 text-sm text-muted-foreground">
+					Página {currentPage} de {totalPages}
+				</span>
+				
+				<button
+					class="rounded-md border bg-card p-2 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+					onclick={() => loadPage(currentPage + 1)}
+					disabled={currentPage === totalPages || isLoading}
+				>
+					<ChevronRight class="h-5 w-5" />
+				</button>
+			</div>
+		{/if}
 	</div>
 </div>

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

@@ -1,14 +1,16 @@
 import { obtenerSeguidoresPorUsuario } from '@/hooks/obtenerSeguidoresPorUsuario';
 import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario';
 import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
 import type { UserResponseDto, UsersResponseDto } from '../../../types';
 
-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);
 
 	const seguidoresResponse: UsersResponseDto | null = await obtenerSeguidoresPorUsuario(
 		usuario.id,
+		1,
 		100,
 		fetch
 	);

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

@@ -1,15 +1,41 @@
 <script lang="ts">
 	import ArrowLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import type { UserResponseDto } from '../../../types';
 	import UserCard from '@/components/UserCard.svelte';
 	import { goto } from '$app/navigation';
+	import { obtenerSeguidosPorUsuario } from '@/hooks/obtenerSeguidosPorUsuario';
 
 	type Data = {
 		usuario: UserResponseDto;
 		seguidos: UserResponseDto[];
+		totalCount: number;
 	};
 
 	let { data }: { data: Data } = $props();
+	
+	let currentPage = $state(1);
+	let isLoading = $state(false);
+	const limit = 100;
+
+	let totalPages = $derived(Math.ceil(data.totalCount / limit));
+
+	async function loadPage(page: number) {
+		if (isLoading) return;
+		
+		isLoading = true;
+		const response = await obtenerSeguidosPorUsuario(data.usuario.id, page, limit);
+		
+		if (response) {
+			data.seguidos = response.response as UserResponseDto[];
+			data.totalCount = response.totalCount;
+			currentPage = page;
+		}
+		
+		isLoading = false;
+	}
+
 </script>
 
 <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
@@ -25,7 +51,12 @@
 				<ArrowLeft />
 			</button>
 		</div>
-		{#if data.seguidos.length === 0}
+		
+		{#if isLoading}
+			<div class="py-8 text-center text-muted-foreground">
+				<p>Cargando...</p>
+			</div>
+		{:else if data.seguidos.length === 0}
 			<div class="py-8 text-center text-muted-foreground">
 				<p>No hay seguidos para mostrar.</p>
 			</div>
@@ -38,5 +69,29 @@
 				{/each}
 			</div>
 		{/if}
+
+		{#if totalPages > 1}
+			<div class="mt-6 flex items-center justify-center gap-2">
+				<button
+					class="rounded-md border bg-card p-2 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+					onclick={() => loadPage(currentPage - 1)}
+					disabled={currentPage === 1 || isLoading}
+				>
+					<ChevronLeft class="h-5 w-5" />
+				</button>
+				
+				<span class="px-4 text-sm text-muted-foreground">
+					Página {currentPage} de {totalPages}
+				</span>
+				
+				<button
+					class="rounded-md border bg-card p-2 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+					onclick={() => loadPage(currentPage + 1)}
+					disabled={currentPage === totalPages || isLoading}
+				>
+					<ChevronRight class="h-5 w-5" />
+				</button>
+			</div>
+		{/if}
 	</div>
 </div>

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

@@ -10,12 +10,14 @@ export const load: PageLoad = async ({ params, fetch }) => {
 
 	const seguidosResponse: UsersResponseDto | null = await obtenerSeguidosPorUsuario(
 		usuario.id,
+		1,
 		100,
 		fetch
 	);
 
 	return {
 		usuario,
-		seguidos: seguidosResponse?.response || []
+		seguidos: seguidosResponse?.response || [],
+		totalCount: seguidosResponse?.totalCount ?? 0
 	};
 };