fix: make page size/total pages reactive

Author: danielroe

app/components/PackageList.vue

@@ -98,7 +98,7 @@ const { handleScroll, scrollToPage } = useVirtualInfiniteScroll({
   itemCount,
   hasMore,
   isLoading,
-  pageSize: numericPageSize.value,
+  pageSize: numericPageSize,
   threshold: 5,
   onLoadMore: () => emit('loadMore'),
   onPageChange: page => emit('pageChange', page),
@@ -212,7 +212,19 @@ defineExpose({
 
     <!-- Card View with Pagination -->
     <template v-else>
-      <ol class="list-none m-0 p-0">
+      <!-- Loading state when fetching page data -->
+      <div
+        v-if="isLoading && displayedResults.length === 0"
+        class="py-12 flex items-center justify-center"
+      >
+        <div class="flex items-center gap-3 text-fg-muted font-mono text-sm">
+          <span
+            class="w-5 h-5 border-2 border-fg-subtle border-t-fg rounded-full motion-safe:animate-spin"
+          />
+          {{ $t('common.loading') }}
+        </div>
+      </div>
+      <ol v-else class="list-none m-0 p-0">
         <li v-for="(item, index) in displayedResults" :key="item.package.name" class="pb-4">
           <PackageCard
             :result="item"

app/composables/useVirtualInfiniteScroll.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import type { MaybeRefOrGetter, Ref } from 'vue'
 
 export interface WindowVirtualizerHandle {
   readonly scrollOffset: number
@@ -20,8 +20,8 @@ export interface UseVirtualInfiniteScrollOptions {
   hasMore: Ref<boolean>
   /** Whether currently loading */
   isLoading: Ref<boolean>
-  /** Page size for calculating current page */
-  pageSize: number
+  /** Page size for calculating current page (reactive) */
+  pageSize: MaybeRefOrGetter<number>
   /** Threshold in items before end to trigger load */
   threshold?: number
   /** Callback to load more items */
@@ -60,7 +60,8 @@ export function useVirtualInfiniteScroll(options: UseVirtualInfiniteScrollOption
 
     // Calculate current visible page based on first visible item
     const startIndex = list.findItemIndex(list.scrollOffset)
-    const newPage = Math.floor(startIndex / pageSize) + 1
+    const currentPageSize = toValue(pageSize)
+    const newPage = Math.floor(startIndex / currentPageSize) + 1
 
     if (newPage !== currentPage.value && onPageChange) {
       currentPage.value = newPage
@@ -92,7 +93,7 @@ export function useVirtualInfiniteScroll(options: UseVirtualInfiniteScrollOption
     const list = listRef.value
     if (!list || page < 1) return
 
-    const targetIndex = (page - 1) * pageSize
+    const targetIndex = (page - 1) * toValue(pageSize)
     list.scrollToIndex(targetIndex, { align: 'start' })
     currentPage.value = page
   }

app/pages/@[org].vue

@@ -60,11 +60,25 @@ const {
 // Pagination state
 const currentPage = ref(1)
 
+// Calculate total pages
+const totalPages = computed(() => {
+  if (pageSize.value === 'all') return 1
+  const numericSize = typeof pageSize.value === 'number' ? pageSize.value : 25
+  return Math.ceil(sortedPackages.value.length / numericSize)
+})
+
 // Reset to page 1 when filters change
 watch([filters, sortOption], () => {
   currentPage.value = 1
 })
 
+// Clamp current page when total pages decreases (e.g., after filtering)
+watch(totalPages, newTotal => {
+  if (currentPage.value > newTotal && newTotal > 0) {
+    currentPage.value = newTotal
+  }
+})
+
 // Debounced URL update for filter/sort
 const updateUrl = debounce((updates: { filter?: string; sort?: string }) => {
   router.replace({