test: infinite scroll virtualization fix

Author: ben-fornefeld

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

@@ -144,13 +144,14 @@ const BuildsTable = () => {
     })
   }, [builds, runningStatusesData])
 
-  // virtualization - account for loader rows only when loading
-  const showPreviousLoader = isFetchingPreviousPage
-  const showNextLoader = isFetchingNextPage
+  // virtualization - always include placeholder rows when more pages exist
+  // this ensures scroll position stays stable when new data loads
+  const hasPreviousRow = hasPreviousPage
+  const hasNextRow = hasNextPage
   const rowCount =
     buildsWithLiveStatus.length +
-    (showPreviousLoader ? 1 : 0) +
-    (showNextLoader ? 1 : 0)
+    (hasPreviousRow ? 1 : 0) +
+    (hasNextRow ? 1 : 0)
 
   const virtualizer = useVirtualizer({
     count: rowCount,
@@ -168,18 +169,16 @@ const BuildsTable = () => {
         (virtualRows[virtualRows.length - 1]?.end ?? 0)
       : 0
 
-  // auto-fetch when scrolling near edges
+  // auto-fetch when scrolling near edges (when placeholder row becomes visible)
   useEffect(() => {
     if (!hasNextPage || isFetchingNextPage) return
 
     const lastVirtualRow = virtualRows[virtualRows.length - 1]
     if (!lastVirtualRow) return
 
-    const lastDataIndex = showPreviousLoader
-      ? lastVirtualRow.index - 1
-      : lastVirtualRow.index
-
-    if (lastDataIndex >= buildsWithLiveStatus.length - 1) {
+    // check if the "load more" placeholder row is visible
+    const loadMoreRowIndex = buildsWithLiveStatus.length + (hasPreviousRow ? 1 : 0)
+    if (lastVirtualRow.index >= loadMoreRowIndex) {
       fetchNextPage()
     }
   }, [
@@ -188,7 +187,7 @@ const BuildsTable = () => {
     isFetchingNextPage,
     buildsWithLiveStatus.length,
     fetchNextPage,
-    showPreviousLoader,
+    hasPreviousRow,
   ])
 
   useEffect(() => {
@@ -197,19 +196,15 @@ const BuildsTable = () => {
     const firstVirtualRow = virtualRows[0]
     if (!firstVirtualRow) return
 
-    const firstDataIndex = showPreviousLoader
-      ? firstVirtualRow.index - 1
-      : firstVirtualRow.index
-
-    if (firstDataIndex <= 0) {
+    // check if the "load previous" placeholder row is visible (index 0)
+    if (firstVirtualRow.index === 0) {
       fetchPreviousPage()
     }
   }, [
     virtualRows,
     hasPreviousPage,
     isFetchingPreviousPage,
     fetchPreviousPage,
-    showPreviousLoader,
   ])
 
   // UI state
@@ -279,31 +274,54 @@ const BuildsTable = () => {
                 )}
 
                 {virtualRows.map((virtualRow) => {
-                  const isPreviousLoaderRow =
-                    showPreviousLoader && virtualRow.index === 0
-                  const isNextLoaderRow =
-                    showNextLoader &&
+                  const isPreviousPlaceholder =
+                    hasPreviousRow && virtualRow.index === 0
+                  const isNextPlaceholder =
+                    hasNextRow &&
                     virtualRow.index ===
-                      buildsWithLiveStatus.length + (showPreviousLoader ? 1 : 0)
-                  const buildIndex = showPreviousLoader
+                      buildsWithLiveStatus.length + (hasPreviousRow ? 1 : 0)
+                  const buildIndex = hasPreviousRow
                     ? virtualRow.index - 1
                     : virtualRow.index
                   const build = buildsWithLiveStatus[buildIndex]
 
-                  if (isPreviousLoaderRow || isNextLoaderRow) {
+                  if (isPreviousPlaceholder) {
+                    return (
+                      <TableRow
+                        key="placeholder-prev"
+                        style={{ height: ROW_HEIGHT }}
+                      >
+                        <TableCell
+                          colSpan={6}
+                          className="text-start text-fg-tertiary"
+                        >
+                          {isFetchingPreviousPage && (
+                            <span className="flex items-center gap-2">
+                              <Loader variant="slash" size="sm" />
+                              Loading...
+                            </span>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    )
+                  }
+
+                  if (isNextPlaceholder) {
                     return (
                       <TableRow
-                        key={isPreviousLoaderRow ? 'loader-prev' : 'loader-next'}
+                        key="placeholder-next"
                         style={{ height: ROW_HEIGHT }}
                       >
                         <TableCell
                           colSpan={6}
                           className="text-start text-fg-tertiary"
                         >
-                          <span className="flex items-center gap-2">
-                            <Loader variant="slash" size="sm" />
-                            Loading...
-                          </span>
+                          {isFetchingNextPage && (
+                            <span className="flex items-center gap-2">
+                              <Loader variant="slash" size="sm" />
+                              Loading...
+                            </span>
+                          )}
                         </TableCell>
                       </TableRow>
                     )