add pagination in following and followers

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>
+</div>