use load more button pattern

Author: drankou

src/features/dashboard/templates/builds/table-cells.tsx

@@ -18,7 +18,6 @@ import CopyButtonInline from '@/ui/copy-button-inline'
 import { Badge } from '@/ui/primitives/badge'
 import { Button } from '@/ui/primitives/button'
 import { CheckIcon, CloseIcon } from '@/ui/primitives/icons'
-import { Loader } from '@/ui/primitives/loader'
 
 export function BuildId({ id }: { id: string }) {
   return (
@@ -61,42 +60,6 @@ export function Template({
   )
 }
 
-export function LoadMoreButton({
-  isLoading,
-  onLoadMore,
-}: {
-  isLoading: boolean
-  onLoadMore: () => void
-}) {
-  if (isLoading) {
-    return (
-      <span className="inline-flex items-center gap-1">
-        Loading
-        <Loader variant="dots" />
-      </span>
-    )
-  }
-  return (
-    <button
-      onClick={onLoadMore}
-      className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
-    >
-      Load more
-    </button>
-  )
-}
-
-export function BackToTopButton({ onBackToTop }: { onBackToTop: () => void }) {
-  return (
-    <button
-      onClick={onBackToTop}
-      className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
-    >
-      Back to top
-    </button>
-  )
-}
-
 export function Duration({
   createdAt,
   finishedAt,

src/features/dashboard/templates/builds/table.tsx

@@ -16,6 +16,7 @@ import type {
 import { useRouteParams } from '@/lib/hooks/use-route-params'
 import { cn } from '@/lib/utils/ui'
 import { useTRPC } from '@/trpc/client'
+import { BackToTopButton, LoadMoreButton } from '@/ui/pagination-buttons'
 import { ArrowDownIcon } from '@/ui/primitives/icons'
 import { Loader } from '@/ui/primitives/loader'
 import {
@@ -28,10 +29,8 @@ import {
 } from '@/ui/primitives/table'
 import BuildsEmpty from './empty'
 import {
-  BackToTopButton,
   BuildId,
   Duration,
-  LoadMoreButton,
   Reason,
   StartedAt,
   Status,

src/features/dashboard/templates/list/table-body.tsx

@@ -1,17 +1,18 @@
 import { flexRender, type Table } from '@tanstack/react-table'
-import { type RefObject, useEffect } from 'react'
+import type { RefObject } from 'react'
 import type { Template } from '@/core/modules/templates/models'
 import { useVirtualRows } from '@/lib/hooks/use-virtual-rows'
+import { cn } from '@/lib/utils'
 import { DataTableBody, DataTableCell, DataTableRow } from '@/ui/data-table'
 import Empty from '@/ui/empty'
+import { LoadMoreButton } from '@/ui/pagination-buttons'
 import { Button } from '@/ui/primitives/button'
 import { CloseIcon, ExternalLinkIcon } from '@/ui/primitives/icons'
 import { useTemplateTableStore } from './stores/table-store'
 
 const ROW_HEIGHT_PX = 32
 const VIRTUAL_OVERSCAN = 8
 const INITIAL_FALLBACK_ROW_COUNT = 100
-const PREFETCH_THRESHOLD = 8
 
 interface TemplatesTableBodyProps {
   templates: Template[] | undefined
@@ -20,6 +21,7 @@ interface TemplatesTableBodyProps {
   hasNextPage: boolean
   isFetchingNextPage: boolean
   fetchNextPage: () => void
+  isRefetching: boolean
 }
 
 export function TemplatesTableBody({
@@ -29,6 +31,7 @@ export function TemplatesTableBody({
   hasNextPage,
   isFetchingNextPage,
   fetchNextPage,
+  isRefetching,
 }: TemplatesTableBodyProps) {
   'use no memo'
 
@@ -38,7 +41,6 @@ export function TemplatesTableBody({
   const centerRows = table.getCenterRows()
   const {
     virtualRows,
-    virtualizer,
     totalHeight: virtualizedTotalHeight,
     paddingTop: virtualPaddingTop,
   } = useVirtualRows<Template>({
@@ -48,26 +50,6 @@ export function TemplatesTableBody({
     overscan: VIRTUAL_OVERSCAN,
   })
 
-  const virtualItems = virtualizer.getVirtualItems()
-  const lastVisibleIndex = virtualItems[virtualItems.length - 1]?.index ?? -1
-
-  // Load the next page as the user scrolls near the bottom of the list.
-  useEffect(() => {
-    if (
-      hasNextPage &&
-      !isFetchingNextPage &&
-      lastVisibleIndex >= centerRows.length - PREFETCH_THRESHOLD
-    ) {
-      fetchNextPage()
-    }
-  }, [
-    hasNextPage,
-    isFetchingNextPage,
-    lastVisibleIndex,
-    centerRows.length,
-    fetchNextPage,
-  ])
-
   const rows =
     virtualRows.length > 0
       ? virtualRows
@@ -115,21 +97,35 @@ export function TemplatesTableBody({
   }
 
   return (
-    <DataTableBody virtualizedTotalHeight={virtualizedTotalHeight}>
-      {virtualPaddingTop > 0 && <div style={{ height: virtualPaddingTop }} />}
-      {rows.map((row) => (
-        <DataTableRow
-          key={row.id}
-          isSelected={row.getIsSelected()}
-          className="h-8 border-b"
-        >
-          {row.getVisibleCells().map((cell) => (
-            <DataTableCell key={cell.id} cell={cell}>
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </DataTableCell>
-          ))}
-        </DataTableRow>
-      ))}
-    </DataTableBody>
+    <>
+      <DataTableBody
+        virtualizedTotalHeight={virtualizedTotalHeight}
+        className={cn(isRefetching && 'opacity-70 transition-opacity')}
+      >
+        {virtualPaddingTop > 0 && <div style={{ height: virtualPaddingTop }} />}
+        {rows.map((row) => (
+          <DataTableRow
+            key={row.id}
+            isSelected={row.getIsSelected()}
+            className="h-8 border-b"
+          >
+            {row.getVisibleCells().map((cell) => (
+              <DataTableCell key={cell.id} cell={cell}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </DataTableCell>
+            ))}
+          </DataTableRow>
+        ))}
+      </DataTableBody>
+
+      {hasNextPage && (
+        <div className="flex items-center justify-center py-3 text-fg-tertiary max-md:sticky max-md:left-0 max-md:w-[calc(100svw-1.5rem)]">
+          <LoadMoreButton
+            isLoading={isFetchingNextPage}
+            onLoadMore={fetchNextPage}
+          />
+        </div>
+      )}
+    </>
   )
 }

src/features/dashboard/templates/list/table.tsx

@@ -10,7 +10,7 @@ import {
   type TableOptions,
   useReactTable,
 } from '@tanstack/react-table'
-import { useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocalStorage } from 'usehooks-ts'
 import type {
   DefaultTemplate,
@@ -38,8 +38,6 @@ import { fallbackData, templatesTableConfig, useColumns } from './table-config'
 
 const PAGE_SIZE = 50
 
-// Maps a table column id to its server sort-token base. Only mapped columns are
-// sortable server-side; anything else falls back to updated_at.
 const COLUMN_TO_SORT_BASE: Record<string, string> = {
   name: 'name',
   cpuCount: 'cpu_count',
@@ -71,6 +69,7 @@ export default function TemplatesTable() {
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
+    isFetching,
   } = useSuspenseInfiniteQuery(
     trpc.templates.getTemplates.infiniteQueryOptions(
       {
@@ -79,7 +78,6 @@ export default function TemplatesTable() {
         cpuCount,
         memoryMB,
         public: isPublic,
-        // The search input already debounces before writing to the store.
         search: globalFilter || undefined,
         sort,
       },
@@ -96,6 +94,22 @@ export default function TemplatesTable() {
     [data]
   )
 
+  const { isRefetching, clearRefetching } = useTemplatesRefetchTracking(
+    sort,
+    globalFilter,
+    cpuCount,
+    memoryMB,
+    isPublic
+  )
+
+  useEffect(() => {
+    if (!isFetching && isRefetching) {
+      clearRefetching()
+    }
+  }, [isFetching, isRefetching, clearRefetching])
+
+  const isListDimmed = isRefetching && templates.length > 0
+
   const scrollRef = useRef<HTMLDivElement>(null)
 
   const [columnSizing, setColumnSizing] = useLocalStorage<ColumnSizingState>(
@@ -125,9 +139,6 @@ export default function TemplatesTable() {
 
   const columnSizeVars = useColumnSizeVars(table)
 
-  // The query refetches from the first page whenever sort/filter/search change,
-  // so reset the scroll position to the top to match. These values are
-  // intentional triggers even though the effect body only touches the ref.
   // biome-ignore lint/correctness/useExhaustiveDependencies: scroll reset is triggered by query-input changes
   useEffect(() => {
     if (scrollRef.current) {
@@ -207,9 +218,34 @@ export default function TemplatesTable() {
             hasNextPage={hasNextPage}
             isFetchingNextPage={isFetchingNextPage}
             fetchNextPage={fetchNextPage}
+            isRefetching={isListDimmed}
           />
         </DataTable>
       </div>
     </ClientOnly>
   )
 }
+
+function useTemplatesRefetchTracking(
+  sort: string,
+  globalFilter: string,
+  cpuCount: number | undefined,
+  memoryMB: number | undefined,
+  isPublic: boolean | undefined
+) {
+  const [isRefetching, setIsRefetching] = useState(false)
+  const isFirstRender = useRef(true)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: these are change triggers, not values read in the effect
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false
+      return
+    }
+    setIsRefetching(true)
+  }, [sort, globalFilter, cpuCount, memoryMB, isPublic])
+
+  const clearRefetching = useCallback(() => setIsRefetching(false), [])
+
+  return { isRefetching, clearRefetching }
+}

src/ui/pagination-buttons.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { Loader } from '@/ui/primitives/loader'
+
+export function LoadMoreButton({
+  isLoading,
+  onLoadMore,
+}: {
+  isLoading: boolean
+  onLoadMore: () => void
+}) {
+  if (isLoading) {
+    return (
+      <span className="inline-flex items-center gap-1">
+        Loading
+        <Loader variant="dots" />
+      </span>
+    )
+  }
+  return (
+    <button
+      type="button"
+      onClick={onLoadMore}
+      className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
+    >
+      Load more
+    </button>
+  )
+}
+
+export function BackToTopButton({ onBackToTop }: { onBackToTop: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onBackToTop}
+      className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
+    >
+      Back to top
+    </button>
+  )
+}