feat: paginate repo list with infinite scroll

Load 30 repos at a time instead of 100 at once, showing data sooner.
Adds v-infinite-scroll to RepoList.vue to fetch subsequent pages on scroll.
This commit is contained in:
Julien Calixte
2026-04-05 11:56:36 +02:00
parent 3de9eb35f6
commit 006cd63388
3 changed files with 43 additions and 23 deletions

View File

@@ -1,4 +1,6 @@
<script lang="ts" setup>
import { vInfiniteScroll } from "@vueuse/components"
import GoBack from "@/components/GoBack.vue"
import { useGitHubLogin } from "@/hooks/useGitHubLogin.hook"
import { useRepos } from "@/hooks/useRepos.hook"
@@ -6,12 +8,15 @@ import { useRepoList } from "@/modules/repo/hooks/useRepoList.hook"
const { username } = useGitHubLogin()
const { isReady } = useRepos()
const { favoriteRepos, otherRepos, favoriteCheckboxes, toggleCheckbox } =
const { favoriteRepos, otherRepos, favoriteCheckboxes, toggleCheckbox, canLoadMore, loadMore } =
useRepoList()
</script>
<template>
<div class="repo-list">
<div
class="repo-list"
v-infinite-scroll="[loadMore, { canLoadMore: () => canLoadMore }]"
>
<h1 class="title is-1">Repositories</h1>
<go-back />
<div v-if="!isReady">loading...</div>