refactor: use useVisibleItems composable for org page

Replace the custom progressive loading state (hasMore, isLoadingMore,
loadAll, cache) with the useVisibleItems composable from #2395.

- useOrgPackages now fetches all packages upfront via batched Algolia
- useVisibleItems controls display (first 250 visible, expand on demand)
- Filtering/sorting triggers expand() to reveal all items
- Net -147 lines removed

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Adebesin-Cell

app/composables/npm/useOrgPackages.ts

@@ -2,33 +2,27 @@ import type { NpmSearchResponse, NpmSearchResult, PackageMetaResponse } from '#s
 import { emptySearchResponse, metaToSearchResult } from './search-utils'
 import { mapWithConcurrency } from '#shared/utils/async'
 
-/** Number of packages to fetch metadata for in the initial load */
-const INITIAL_BATCH_SIZE = 250
-
 /** Max names per Algolia getObjects request */
 const ALGOLIA_BATCH_SIZE = 1000
 
 export interface OrgPackagesResponse extends NpmSearchResponse {
-  /** Total number of packages in the org (may exceed objects.length if not all loaded yet) */
+  /** Total number of packages in the org */
   totalPackages: number
-  /** Whether there are more packages that haven't been loaded yet */
-  isTruncated: boolean
 }
 
 function emptyOrgResponse(): OrgPackagesResponse {
   return {
     ...emptySearchResponse(),
     totalPackages: 0,
-    isTruncated: false,
   }
 }
 
 /**
- * Fetch packages for an npm organization with progressive loading.
+ * Fetch all packages for an npm organization.
  *
  * 1. Gets the authoritative package list from the npm registry (single request)
- * 2. Fetches metadata for the first batch immediately
- * 3. Remaining packages are loaded on-demand via `loadAll()`
+ * 2. Fetches metadata from Algolia in batches (max 1000 per request)
+ * 3. Falls back to lightweight server-side package-meta lookups
  */
 export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
   const route = useRoute()
@@ -40,24 +34,6 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
   })
   const { getPackagesByNameSlice } = useAlgoliaSearch()
 
-  // --- Progressive loading state ---
-  const cache = shallowRef<{
-    org: string
-    allNames: string[]
-    objects: NpmSearchResult[]
-    totalPackages: number
-  } | null>(null)
-
-  const isLoadingMore = shallowRef(false)
-
-  const hasMore = computed(() => {
-    if (!cache.value) return false
-    return cache.value.objects.length < cache.value.allNames.length
-  })
-
-  // Promise lock to prevent duplicate loadAll calls
-  let loadAllPromise: Promise<void> | null = null
-
   const asyncData = useLazyAsyncData(
     () => `org-packages:${searchProviderValue.value}:${toValue(orgName)}`,
     async ({ ssrContext }, { signal }) => {
@@ -90,19 +66,24 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
       }
 
       if (packageNames.length === 0) {
-        cache.value = { org, allNames: [], objects: [], totalPackages: 0 }
         return emptyOrgResponse()
       }
 
       const totalPackages = packageNames.length
-      const initialNames = packageNames.slice(0, INITIAL_BATCH_SIZE)
 
-      // Fetch metadata for first batch
-      let initialObjects: NpmSearchResult[] = []
+      // Fetch metadata from Algolia in batches
+      let objects: NpmSearchResult[] = []
 
       if (searchProviderValue.value === 'algolia') {
         try {
-          initialObjects = await getPackagesByNameSlice(initialNames)
+          const batches: string[][] = []
+          for (let i = 0; i < packageNames.length; i += ALGOLIA_BATCH_SIZE) {
+            batches.push(packageNames.slice(i, i + ALGOLIA_BATCH_SIZE))
+          }
+
+          const results = await Promise.all(batches.map(batch => getPackagesByNameSlice(batch)))
+
+          objects = results.flat()
         } catch {
           // Fall through to npm fallback
         }
@@ -111,10 +92,10 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
       // Staleness guard
       if (toValue(orgName) !== org) return emptyOrgResponse()
 
-      // npm fallback for initial batch
-      if (initialObjects.length === 0) {
+      // npm fallback
+      if (objects.length === 0) {
         const metaResults = await mapWithConcurrency(
-          initialNames,
+          packageNames,
           async name => {
             try {
               return await $fetch<PackageMetaResponse>(
@@ -130,152 +111,21 @@ export function useOrgPackages(orgName: MaybeRefOrGetter<string>) {
 
         if (toValue(orgName) !== org) return emptyOrgResponse()
 
-        initialObjects = metaResults
+        objects = metaResults
           .filter((meta): meta is PackageMetaResponse => meta !== null)
           .map(metaToSearchResult)
       }
 
-      cache.value = {
-        org,
-        allNames: packageNames,
-        objects: initialObjects,
-        totalPackages,
-      }
-
       return {
         isStale: false,
-        objects: initialObjects,
-        total: initialObjects.length,
+        objects,
+        total: objects.length,
         totalPackages,
-        isTruncated: packageNames.length > initialObjects.length,
         time: new Date().toISOString(),
       } satisfies OrgPackagesResponse
     },
     { default: emptyOrgResponse },
   )
 
-  /** Load all remaining packages that weren't fetched in the initial batch */
-  async function loadAll(): Promise<void> {
-    if (!hasMore.value) return
-
-    // Reuse existing promise if already running
-    if (loadAllPromise) {
-      await loadAllPromise
-      return
-    }
-
-    loadAllPromise = _doLoadAll()
-    try {
-      await loadAllPromise
-    } finally {
-      loadAllPromise = null
-    }
-  }
-
-  async function _doLoadAll(): Promise<void> {
-    const currentCache = cache.value
-    if (!currentCache || currentCache.objects.length >= currentCache.allNames.length) return
-
-    const org = currentCache.org
-    isLoadingMore.value = true
-
-    try {
-      const remainingNames = currentCache.allNames.slice(currentCache.objects.length)
-
-      if (searchProviderValue.value === 'algolia') {
-        // Split remaining into batches and fetch in parallel
-        const batches: string[][] = []
-        for (let i = 0; i < remainingNames.length; i += ALGOLIA_BATCH_SIZE) {
-          batches.push(remainingNames.slice(i, i + ALGOLIA_BATCH_SIZE))
-        }
-
-        const results = await Promise.allSettled(
-          batches.map(batch => getPackagesByNameSlice(batch)),
-        )
-
-        if (toValue(orgName) !== org) return
-
-        const newObjects: NpmSearchResult[] = []
-        for (const result of results) {
-          if (result.status === 'fulfilled') {
-            newObjects.push(...result.value)
-          }
-        }
-
-        if (newObjects.length > 0) {
-          const existingNames = new Set(currentCache.objects.map(o => o.package.name))
-          const deduped = newObjects.filter(o => !existingNames.has(o.package.name))
-          cache.value = {
-            ...currentCache,
-            objects: [...currentCache.objects, ...deduped],
-          }
-        }
-      } else {
-        // npm fallback: fetch with concurrency
-        const metaResults = await mapWithConcurrency(
-          remainingNames,
-          async name => {
-            try {
-              return await $fetch<PackageMetaResponse>(
-                `/api/registry/package-meta/${encodePackageName(name)}`,
-              )
-            } catch {
-              return null
-            }
-          },
-          10,
-        )
-
-        if (toValue(orgName) !== org) return
-
-        const newObjects = metaResults
-          .filter((meta): meta is PackageMetaResponse => meta !== null)
-          .map(metaToSearchResult)
-
-        if (newObjects.length > 0) {
-          const existingNames = new Set(currentCache.objects.map(o => o.package.name))
-          const deduped = newObjects.filter(o => !existingNames.has(o.package.name))
-          cache.value = {
-            ...currentCache,
-            objects: [...currentCache.objects, ...deduped],
-          }
-        }
-      }
-    } finally {
-      isLoadingMore.value = false
-    }
-  }
-
-  // Reset cache when provider changes
-  watch(
-    () => searchProviderValue.value,
-    () => {
-      cache.value = null
-      loadAllPromise = null
-    },
-  )
-
-  // Computed data that prefers cache
-  const data = computed<OrgPackagesResponse | null>(() => {
-    const org = toValue(orgName)
-    if (cache.value && cache.value.org === org) {
-      return {
-        isStale: false,
-        objects: cache.value.objects,
-        total: cache.value.objects.length,
-        totalPackages: cache.value.totalPackages,
-        isTruncated: cache.value.objects.length < cache.value.allNames.length,
-        time: new Date().toISOString(),
-      }
-    }
-    return asyncData.data.value
-  })
-
-  return {
-    ...asyncData,
-    data,
-    isLoadingMore,
-    hasMore,
-    loadAll,
-  }
+  return asyncData
 }

app/pages/org/[org].vue

@@ -15,7 +15,7 @@ const orgName = computed(() => route.params.org.toLowerCase())
 const { isConnected } = useConnector()
 
 // Fetch all packages in this org using the org packages API (lazy to not block navigation)
-const { data: results, status, error, isLoadingMore, hasMore, loadAll } = useOrgPackages(orgName)
+const { data: results, status, error } = useOrgPackages(orgName)
 
 // Handle 404 errors reactively (since we're not awaiting)
 watch(
@@ -32,9 +32,11 @@ watch(
   { immediate: true },
 )
 
-const packages = computed(() => results.value?.objects ?? [])
+const allPackages = computed(() => results.value?.objects ?? [])
 const totalPackages = computed(() => results.value?.totalPackages ?? 0)
-const packageCount = computed(() => packages.value.length)
+
+const { visibleItems: packages, hasMore, expand } = useVisibleItems(allPackages, 250)
+const packageCount = computed(() => allPackages.value.length)
 
 // Preferences (persisted to localStorage)
 const { viewMode, paginationMode, pageSize, columns, toggleColumn, resetColumns } =
@@ -57,7 +59,7 @@ const {
   clearAllFilters,
   setSort,
 } = useStructuredFilters({
-  packages,
+  packages: allPackages,
   initialSort: (normalizeSearchParam(route.query.sort) as SortOption) ?? 'updated-desc',
 })
 
@@ -69,15 +71,15 @@ const totalPages = computed(() => {
   return Math.ceil(sortedPackages.value.length / pageSize.value)
 })
 
-// Reset to page 1 when filters change; load all results so client-side filtering works
+// Reset to page 1 when filters change; expand all so client-side filtering works
 watch([filters, sortOption], () => {
   currentPage.value = 1
   if (
     filters.value.text ||
     filters.value.keywords.length > 0 ||
     sortOption.value !== 'updated-desc'
   ) {
-    loadAll()
+    expand()
   }
 })
 
@@ -177,19 +179,13 @@ defineOgImageComponent('Default', {
             <template v-if="hasMore">
               {{
                 $t('org.page.showing_packages', {
-                  loaded: $n(packageCount),
-                  total: $n(totalPackages),
+                  loaded: $n(packages.length),
+                  total: $n(packageCount),
                 })
               }}
             </template>
             <template v-else>
-              {{
-                $t(
-                  'org.public_packages',
-                  { count: $n(totalPackages || packageCount) },
-                  totalPackages || packageCount,
-                )
-              }}
+              {{ $t('org.public_packages', { count: $n(packageCount) }, packageCount) }}
             </template>
           </p>
         </div>
@@ -260,7 +256,7 @@ defineOgImageComponent('Default', {
 
     <!-- Loading state (only when no packages loaded yet) -->
     <LoadingSpinner
-      v-if="status === 'pending' && packages.length === 0"
+      v-if="status === 'pending' && allPackages.length === 0"
       :text="$t('common.loading_packages')"
     />
 
@@ -324,15 +320,14 @@ defineOgImageComponent('Default', {
         <PackageList
           :results="sortedPackages"
           :has-more="hasMore"
-          :is-loading="isLoadingMore"
           :view-mode="viewMode"
           :columns="columns"
           :filters="filters"
           v-model:sort-option="sortOption"
           :pagination-mode="paginationMode"
           :page-size="pageSize"
           :current-page="currentPage"
-          @load-more="loadAll"
+          @load-more="expand"
           @click-keyword="toggleKeyword"
         />