fix ui scroll

Author: benjamin-747

moon/apps/web/components/ClView/components/Checks/cpns/Task.tsx

@@ -288,15 +288,8 @@ const TaskItem = memo(function TaskItem({
 
   const showQueued = Boolean(isQueued) && build.status === 'Building'
 
-  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    const scrollParent = e.currentTarget.closest('[data-build-list-scroll]') as HTMLElement | null
-    const scrollTop = scrollParent?.scrollTop ?? 0
-
+  const handleClick = () => {
     onSelectBuild(build.id)
-
-    requestAnimationFrame(() => {
-      if (scrollParent) scrollParent.scrollTop = scrollTop
-    })
   }
 
   const handleRetry = (e: React.MouseEvent) => {

moon/apps/web/components/ClView/components/Checks/hooks/useLeftPanelScroll.ts

@@ -1,22 +1,35 @@
-import { RefObject, useEffect, useRef } from 'react'
+import { RefObject, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
 
 export function useLeftPanelScroll(cl: string, buildId: string, leftPanelRef: RefObject<HTMLDivElement | null>) {
   const leftPanelScrollRef = useRef(0)
+  const pendingRestoreRef = useRef<number | null>(null)
+  const isRestoringRef = useRef(false)
   const prevClRef = useRef(cl)
 
   useEffect(() => {
     if (prevClRef.current !== cl) {
       prevClRef.current = cl
       leftPanelScrollRef.current = 0
+      pendingRestoreRef.current = null
     }
   }, [cl])
 
+  const preserveScroll = useCallback(() => {
+    const panel = leftPanelRef.current
+
+    if (panel) {
+      pendingRestoreRef.current = panel.scrollTop
+    }
+  }, [leftPanelRef])
+
   useEffect(() => {
     const panel = leftPanelRef.current
 
     if (!panel) return
 
     const onScroll = () => {
+      if (isRestoringRef.current) return
+
       leftPanelScrollRef.current = panel.scrollTop
     }
 
@@ -25,17 +38,25 @@ export function useLeftPanelScroll(cl: string, buildId: string, leftPanelRef: Re
     return () => panel.removeEventListener('scroll', onScroll)
   }, [leftPanelRef])
 
-  useEffect(() => {
+  // Restore before paint so a re-render cannot reset scroll to 0 and clobber the
+  // saved position via the scroll listener.
+  useLayoutEffect(() => {
     const panel = leftPanelRef.current
 
     if (!panel) return
 
-    const saved = leftPanelScrollRef.current
+    const saved = pendingRestoreRef.current ?? leftPanelScrollRef.current
+
+    pendingRestoreRef.current = null
+
+    isRestoringRef.current = true
+    panel.scrollTop = saved
+    leftPanelScrollRef.current = saved
 
     requestAnimationFrame(() => {
-      panel.scrollTop = saved
+      isRestoringRef.current = false
     })
   }, [buildId, leftPanelRef])
 
-  return {}
+  return { preserveScroll }
 }

moon/apps/web/components/ClView/components/Checks/index.tsx

@@ -40,7 +40,12 @@ const Checks = ({ cl, path, prName }: { cl: string; path?: string; prName?: stri
     defaultLeftWidthPercent
   } = useResizablePanels()
 
-  useLeftPanelScroll(cl, buildId, leftPanelRef)
+  const { preserveScroll } = useLeftPanelScroll(cl, buildId, leftPanelRef)
+
+  const handleSelectBuild = (nextBuildId: string, taskId?: string) => {
+    preserveScroll()
+    selectBuild(nextBuildId, taskId)
+  }
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
 
@@ -278,6 +283,7 @@ const Checks = ({ cl, path, prName }: { cl: string; path?: string; prName?: stri
                           key={task.task_id}
                           onClick={(e) => {
                             e.stopPropagation()
+                            preserveScroll()
                             selectTask(task.task_id)
                             setIsDropdownOpen(false)
                           }}
@@ -326,7 +332,7 @@ const Checks = ({ cl, path, prName }: { cl: string; path?: string; prName?: stri
             tasks={tasksToDisplay}
             logsAvailableIds={logsAvailableIds}
             selectedBuildId={buildId}
-            onSelectBuild={selectBuild}
+            onSelectBuild={handleSelectBuild}
             totalTasksCount={validTasks.length}
             cl={cl}
           />