fix(desktop): improve scroll animation handling in EntryContent

Innei · Innei · commit 70da1ab94b62 · 2025-05-22T14:16:47.000+08:00
- Introduced a reference for scroll animations to manage their lifecycle more effectively.
- Updated the cleanup logic to stop ongoing animations when scrolling actions are triggered.
- Enhanced the scroll behavior by ensuring animations are properly halted before new scroll actions are initiated.

These changes aim to provide a smoother user experience during content transitions.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/index.electron.tsx b/apps/desktop/layer/renderer/src/modules/entry-content/index.electron.tsx
@@ -16,7 +16,7 @@ import { EventBus } from "@follow/utils/event-bus"
 import { springScrollTo } from "@follow/utils/scroller"
 import { cn, combineCleanupFunctions } from "@follow/utils/utils"
 import { ErrorBoundary } from "@sentry/react"
-import type { Variants } from "motion/react"
+import type { JSAnimation, Variants } from "motion/react"
 import { AnimatePresence, m, useAnimationControls } from "motion/react"
 import * as React from "react"
 import { useEffect, useMemo, useRef, useState } from "react"
@@ -101,10 +101,13 @@ export const EntryContent: Component<EntryContentProps> = ({
 
   const animationController = useAnimationControls()
   const prevEntryId = useRef<string | undefined>(undefined)
-
+  const scrollAnimationRef = useRef<JSAnimation<any> | null>(null)
   useEffect(() => {
     if (prevEntryId.current !== entryId) {
-      scrollerRef.current?.scrollTo({ top: 0 })
+      scrollAnimationRef.current?.stop()
+      nextFrame(() => {
+        scrollerRef.current?.scrollTo({ top: 0 })
+      })
       animationController.start(pageMotionVariants.exit).then(() => {
         animationController.start(pageMotionVariants.animate)
       })
@@ -132,6 +135,7 @@ export const EntryContent: Component<EntryContentProps> = ({
       >
         <RootPortal to={panelPortalElement}>
           <RegisterCommands
+            scrollAnimationRef={scrollAnimationRef}
             scrollerRef={scrollerRef}
             isUserInteraction={isUserInteraction}
             setIsUserInteraction={setIsUserInteraction}
@@ -316,10 +320,12 @@ const RegisterCommands = ({
   scrollerRef,
   isUserInteraction,
   setIsUserInteraction,
+  scrollAnimationRef,
 }: {
   scrollerRef: React.RefObject<HTMLDivElement | null>
   isUserInteraction: boolean
   setIsUserInteraction: (isUserInteraction: boolean) => void
+  scrollAnimationRef: React.RefObject<JSAnimation<any> | null>
 }) => {
   const isAlreadyScrolledBottomRef = useRef(false)
   const [showKeepScrollingPanel, setShowKeepScrollingPanel] = useState(false)
@@ -384,16 +390,22 @@ const RegisterCommands = ({
     }
     scrollerRef.current?.addEventListener("wheel", checkScrollBottomByWheel)
 
+    const cleanupScrollAnimation = () => {
+      scrollAnimationRef.current?.stop()
+      scrollAnimationRef.current = null
+    }
     return combineCleanupFunctions(
       () => {
         scrollerRef.current?.removeEventListener("wheel", checkScrollBottomByWheel)
       },
+      cleanupScrollAnimation,
       EventBus.subscribe(COMMAND_ID.entryRender.scrollUp, () => {
         const currentScroll = scrollerRef.current?.scrollTop
         const delta = window.innerHeight
 
         if (typeof currentScroll === "number" && delta) {
-          springScrollTo(currentScroll - delta, scrollerRef.current!)
+          cleanupScrollAnimation()
+          scrollAnimationRef.current = springScrollTo(currentScroll - delta, scrollerRef.current!)
         }
         checkScrollBottom(scrollerRef.current!)
       }),
@@ -408,7 +420,8 @@ const RegisterCommands = ({
         const delta = window.innerHeight
 
         if (typeof currentScroll === "number" && delta) {
-          springScrollTo(currentScroll + delta, $scroller)
+          cleanupScrollAnimation()
+          scrollAnimationRef.current = springScrollTo(currentScroll + delta, $scroller)
         }
         checkScrollBottom($scroller)
       }),
@@ -419,7 +432,7 @@ const RegisterCommands = ({
           if (!$scroller) {
             return
           }
-          springScrollTo(0, $scroller)
+
           $scroller.focus()
           if (highlight) {
             nextFrame(highlightBoundary)
@@ -428,7 +441,7 @@ const RegisterCommands = ({
         },
       ),
     )
-  }, [highlightBoundary, scrollerRef, setIsUserInteraction])
+  }, [highlightBoundary, scrollAnimationRef, scrollerRef, setIsUserInteraction])
 
   return (
     <AnimatePresence>
diff --git a/packages/internal/utils/src/scroller.ts b/packages/internal/utils/src/scroller.ts
@@ -15,9 +15,12 @@ export const springScrollTo = (
 ) => {
   const scrollTop = scrollerElement?.scrollTop
 
+  let isStop = false
   const stopSpringScrollHandler = () => {
+    isStop = true
     animation.stop()
   }
+  let raf: any
   const el = scrollerElement || window
   const animation = animateValue({
     keyframes: [scrollTop + 1, y],
@@ -33,7 +36,16 @@ export const springScrollTo = (
         animation.stop()
       }
 
-      el.scrollTo(0, latest)
+      if (raf) {
+        cancelAnimationFrame(raf)
+      }
+      raf = requestAnimationFrame(() => {
+        if (isStop) {
+          return
+        }
+
+        el.scrollTo(0, latest)
+      })
     },
   })
 
