fix: pause scroll mark read after refresh

Author: DIYgod

apps/desktop/layer/renderer/src/modules/entry-column/Items/picture-masonry.tsx

@@ -9,7 +9,7 @@ import { useMasonryColumn } from "@follow/components/ui/masonry/hooks.js"
 import { Masonry } from "@follow/components/ui/masonry/index.js"
 import { useScrollViewElement } from "@follow/components/ui/scroll-area/hooks.js"
 import { Skeleton } from "@follow/components/ui/skeleton/index.jsx"
-import { useRefValue } from "@follow/hooks"
+import { useRefValue, useScrollMarkReadGracePeriod } from "@follow/hooks"
 import { getEntry } from "@follow/store/entry/getter"
 import { useEntryTranslation } from "@follow/store/translation/hooks"
 import { clsx } from "@follow/utils/utils"
@@ -36,6 +36,7 @@ import { MediaContainerWidthProvider } from "~/components/ui/media/MediaContaine
 import type { StoreImageType } from "~/store/image"
 import { imageActions } from "~/store/image"
 
+import { useEntriesState } from "../context/EntriesContext"
 import { batchMarkRead } from "../hooks/useEntryMarkReadHandler"
 import { PictureWaterFallItem } from "./picture-item"
 
@@ -48,6 +49,10 @@ const gutter = 24
 
 export const PictureMasonry: FC<MasonryProps> = (props) => {
   const { data } = props
+  const entriesState = useEntriesState()
+  const pauseScrollMarkRead = useScrollMarkReadGracePeriod(
+    entriesState.isFetching && !entriesState.isFetchingNextPage,
+  )
   const cacheMap = useState(() => new Map<string, object>())[0]
   const [isInitDim, setIsInitDim] = useState(false)
   const [isInitLayout, setIsInitLayout] = useState(false)
@@ -155,6 +160,7 @@ export const PictureMasonry: FC<MasonryProps> = (props) => {
 
         function scrollOutViewMarkRead(entries: IntersectionObserverEntry[]) {
           if (!scrollMarkRead) return
+          if (pauseScrollMarkRead) return
           if (!scrollElement) return
           let minimumIndex = Number.MAX_SAFE_INTEGER
           entries.forEach((entry) => {
@@ -210,7 +216,7 @@ export const PictureMasonry: FC<MasonryProps> = (props) => {
     return () => {
       observer.disconnect()
     }
-  }, [scrollElement, renderMarkRead, scrollMarkRead, dataRef])
+  }, [dataRef, pauseScrollMarkRead, renderMarkRead, scrollElement, scrollMarkRead])
 
   const [firstScreenReady, setFirstScreenReady] = useState(false)
   useEffect(() => {

apps/desktop/layer/renderer/src/modules/entry-column/hooks/useEntryMarkReadHandler.tsx

@@ -2,46 +2,72 @@ import { getView } from "@follow/constants"
 import { entryActions } from "@follow/store/entry/store"
 import { unreadSyncService } from "@follow/store/unread/store"
 import type { Range } from "@tanstack/react-virtual"
-import { useMemo } from "react"
+import { useEffect, useMemo, useRef } from "react"
 import { useEventCallback } from "usehooks-ts"
 
 import { useGeneralSettingKey } from "~/atoms/settings/general"
 import { useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
 
-export const useEntryMarkReadHandler = (entriesIds: string[]) => {
+type EntryMarkReadHandler = (range: Range, enabled?: boolean) => void
+
+export const useEntryMarkReadHandler = (
+  entriesIds: string[],
+  { pauseScrollMarkRead = false }: { pauseScrollMarkRead?: boolean } = {},
+) => {
   const renderAsRead = useGeneralSettingKey("renderMarkUnread")
   const scrollMarkUnread = useGeneralSettingKey("scrollMarkUnread")
   const feedView = useRouteParamsSelector((params) => params.view)
 
-  const processedEntryIds = useMemo(() => new Set<string>(), [entriesIds])
+  const processedEntryIds = useRef(new Set<string>())
+
+  useEffect(() => {
+    processedEntryIds.current.clear()
+  }, [entriesIds])
 
-  const handleRenderAsRead = useEventCallback(
+  const handleRangeMarkRead = useEventCallback(
     ({ startIndex, endIndex }: Range, enabled?: boolean) => {
       if (!enabled) return
       const idSlice = entriesIds?.slice(startIndex, endIndex)
       if (!idSlice) return
 
       // Filter out entries that have already been processed
-      const newEntries = idSlice.filter((id) => !processedEntryIds.has(id))
+      const newEntries = idSlice.filter((id) => !processedEntryIds.current.has(id))
       if (newEntries.length === 0) return
 
       // Mark these entries as processed to avoid duplicate processing
-      newEntries.forEach((id) => processedEntryIds.add(id))
+      newEntries.forEach((id) => processedEntryIds.current.add(id))
 
       batchMarkRead(newEntries)
     },
   )
 
-  return useMemo(() => {
-    if (getView(feedView)?.wideMode && renderAsRead) {
-      return handleRenderAsRead
+  const handleScrollMarkRead = useEventCallback((range: Range, enabled?: boolean) => {
+    if (pauseScrollMarkRead) return
+    handleRangeMarkRead(range, enabled)
+  })
+
+  const renderMarkReadHandler = useMemo<EntryMarkReadHandler | undefined>(() => {
+    if (!getView(feedView)?.wideMode || !renderAsRead) {
+      return
     }
 
-    if (scrollMarkUnread) {
-      return handleRenderAsRead
+    return handleRangeMarkRead
+  }, [feedView, handleRangeMarkRead, renderAsRead])
+
+  const scrollMarkReadHandler = useMemo<EntryMarkReadHandler | undefined>(() => {
+    if (!scrollMarkUnread) {
+      return
+    }
+
+    return handleScrollMarkRead
+  }, [handleScrollMarkRead, scrollMarkUnread])
+
+  return useMemo(() => {
+    return {
+      handleRenderMarkRead: renderMarkReadHandler,
+      handleScrollMarkRead: scrollMarkReadHandler,
     }
-    return
-  }, [feedView, handleRenderAsRead, renderAsRead, scrollMarkUnread])
+  }, [renderMarkReadHandler, scrollMarkReadHandler])
 }
 
 export function batchMarkRead(ids: string[]) {

apps/desktop/layer/renderer/src/modules/entry-column/index.tsx

@@ -1,5 +1,5 @@
 import { FeedViewType, getView } from "@follow/constants"
-import { useTitle } from "@follow/hooks"
+import { useScrollMarkReadGracePeriod, useTitle } from "@follow/hooks"
 import { useEntry } from "@follow/store/entry/hooks"
 import { useFeedById } from "@follow/store/feed/hooks"
 import { useSubscriptionByFeedId } from "@follow/store/subscription/hooks"
@@ -80,8 +80,12 @@ function EntryColumnContent() {
   }, [activeEntryId, entry?.feedId, isCollection, isPendingEntry, isLoggedIn])
 
   const isInteracted = useRef(false)
+  const isRefreshing = state.isFetching && !state.isFetchingNextPage
+  const pauseScrollMarkRead = useScrollMarkReadGracePeriod(isRefreshing)
 
-  const handleMarkReadInRange = useEntryMarkReadHandler(entriesIds)
+  const { handleRenderMarkRead, handleScrollMarkRead } = useEntryMarkReadHandler(entriesIds, {
+    pauseScrollMarkRead,
+  })
 
   const handleScroll = useCallback(() => {
     if (!isInteracted.current) {
@@ -92,15 +96,15 @@ function EntryColumnContent() {
 
     const [first, second] = rangeQueueRef.current
     if (first && second && second.startIndex - first.startIndex > 0) {
-      handleMarkReadInRange?.(
+      handleScrollMarkRead?.(
         {
           startIndex: first.startIndex,
           endIndex: second.startIndex,
         } as Range,
         isInteracted.current,
       )
     }
-  }, [handleMarkReadInRange, routeFeedId])
+  }, [handleScrollMarkRead, routeFeedId])
 
   const { handleScroll: handleScrollBeyond } = useAttachScrollBeyond()
   const handleCombinedScroll = useCallback(
@@ -114,7 +118,6 @@ function EntryColumnContent() {
   const navigate = useNavigateEntry()
 
   const rangeQueueRef = useRef<Range[]>([])
-  const isRefreshing = state.isFetching && !state.isFetchingNextPage
   const aiTimelineEnabled = useAtomValue(aiTimelineEnabledAtom)
   const showAiTimelineLoading = aiTimelineEnabled && state.isLoading && !state.isFetchingNextPage
   const renderAsRead = useGeneralSettingKey("renderMarkUnread")
@@ -134,9 +137,9 @@ function EntryColumnContent() {
         return
       }
       // For gird, render as mark read logic
-      handleMarkReadInRange?.(e, isInteracted.current)
+      handleRenderMarkRead?.(e, isInteracted.current)
     },
-    [handleMarkReadInRange, renderAsRead, view],
+    [handleRenderMarkRead, renderAsRead, view],
   )
 
   const fetchNextPage = useCallback(() => {

apps/mobile/src/modules/entry-list/EntryListContentArticle.tsx

@@ -40,8 +40,16 @@ export const EntryListContentArticle = ({
   const extraData: EntryExtraData = useMemo(() => ({ entryIds }), [entryIds])
   const readableItemStyle = useReadableContainerStyle(860, 16)
 
-  const { fetchNextPage, isFetching, refetch, isRefetching, hasNextPage, fetchedTime, isReady } =
-    useEntries({ viewId: view, active })
+  const {
+    fetchNextPage,
+    isFetching,
+    isFetchingNextPage,
+    refetch,
+    isRefetching,
+    hasNextPage,
+    fetchedTime,
+    isReady,
+  } = useEntries({ viewId: view, active })
 
   const renderItem = useCallback(
     ({ item: id, extraData, index }: ListRenderItemInfo<string>) => (
@@ -67,6 +75,7 @@ export const EntryListContentArticle = ({
 
   const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
     disabled: active === false || isFetching,
+    refreshing: isFetching && !isFetchingNextPage,
   })
 
   useImperativeHandle(forwardRef, () => ref.current!)

apps/mobile/src/modules/entry-list/EntryListContentPicture.tsx

@@ -42,12 +42,21 @@ export const EntryListContentPicture = ({
   const isTablet = useIsTabletLayout()
 
   useImperativeHandle(forwardRef, () => ref.current!)
-  const { fetchNextPage, refetch, isRefetching, hasNextPage, isFetching, isReady } = useEntries({
+  const {
+    fetchNextPage,
+    refetch,
+    isRefetching,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+    isReady,
+  } = useEntries({
     viewId: view,
     active,
   })
   const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
     disabled: active === false || isFetching,
+    refreshing: isFetching && !isFetchingNextPage,
   })
   const translation = useGeneralSettingKey("translation")
   const translationMode = useGeneralSettingKey("translationMode")

apps/mobile/src/modules/entry-list/EntryListContentSocial.tsx

@@ -25,7 +25,15 @@ export const EntryListContentSocial = ({
 }: { entryIds: string[] | null; active?: boolean; view: FeedViewType } & {
   ref?: React.Ref<ElementRef<typeof TimelineSelectorList> | null>
 }) => {
-  const { fetchNextPage, isFetching, refetch, isRefetching, hasNextPage, isReady } = useEntries({
+  const {
+    fetchNextPage,
+    isFetching,
+    isFetchingNextPage,
+    refetch,
+    isRefetching,
+    hasNextPage,
+    isReady,
+  } = useEntries({
     viewId: view,
     active,
   })
@@ -48,6 +56,7 @@ export const EntryListContentSocial = ({
 
   const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
     disabled: active === false || isFetching,
+    refreshing: isFetching && !isFetchingNextPage,
   })
 
   const translation = useGeneralSettingKey("translation")

apps/mobile/src/modules/entry-list/EntryListContentVideo.tsx

@@ -34,12 +34,21 @@ export const EntryListContentVideo = ({
   const ref = useRef<FlashListRef<any>>(null)
   useImperativeHandle(forwardRef, () => ref.current!)
   const isTablet = useIsTabletLayout()
-  const { fetchNextPage, refetch, isRefetching, isFetching, hasNextPage, isReady } = useEntries({
+  const {
+    fetchNextPage,
+    refetch,
+    isRefetching,
+    isFetching,
+    isFetchingNextPage,
+    hasNextPage,
+    isReady,
+  } = useEntries({
     viewId: view,
     active,
   })
   const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
     disabled: active === false || isFetching,
+    refreshing: isFetching && !isFetchingNextPage,
   })
 
   const translation = useGeneralSettingKey("translation")

apps/mobile/src/modules/entry-list/hooks.ts

@@ -1,3 +1,4 @@
+import { useScrollMarkReadGracePeriod } from "@follow/hooks"
 import { debouncedFetchEntryContentByStream } from "@follow/store/entry/store"
 import { unreadSyncService } from "@follow/store/unread/store"
 import { useIsLoggedIn } from "@follow/store/user/hooks"
@@ -12,17 +13,20 @@ export function useOnViewableItemsChanged({
   disabled,
   idExtractor = defaultIdExtractor,
   onScroll: onScrollProp,
+  refreshing,
 }: {
   disabled?: boolean
   idExtractor?: (item: ViewToken<string>) => string
   onScroll?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
+  refreshing?: boolean
 } = {}) {
   const orientation = useRef<"down" | "up">("down")
   const lastOffset = useRef(0)
   const isLoggedIn = useIsLoggedIn()
 
   const markAsReadWhenScrolling = useGeneralSettingKey("scrollMarkUnread")
   const markAsReadWhenRendering = useGeneralSettingKey("renderMarkUnread")
+  const pauseScrollMarkRead = useScrollMarkReadGracePeriod(refreshing ?? false)
   const [viewableItems, setViewableItems] = useState<ViewToken<string>[]>([])
   const [lastViewableItems, setLastViewableItems] = useState<ViewToken<string>[] | null>()
   const [lastRemovedItems, setLastRemovedItems] = useState<ViewToken<string>[] | null>(null)
@@ -42,6 +46,11 @@ export function useOnViewableItemsChanged({
     // This can avoid misjudgment during the rebound of the pull-to-refresh (because the offset will change from negative to zero during the rebound).
     if (orientation.current === "down" && lastOffset.current > 0) {
       setLastViewableItems(viewableItems)
+      if (pauseScrollMarkRead) {
+        setLastRemovedItems(null)
+        return
+      }
+
       if (removed.length > 0) {
         setLastRemovedItems((prev) => {
           if (prev) {
@@ -57,10 +66,18 @@ export function useOnViewableItemsChanged({
     }
   })
 
+  useEffect(() => {
+    if (!disabled && !pauseScrollMarkRead) {
+      return
+    }
+
+    setLastRemovedItems(null)
+  }, [disabled, pauseScrollMarkRead])
+
   useEffect(() => {
     if (disabled) return
 
-    if (isLoggedIn && markAsReadWhenScrolling && lastRemovedItems) {
+    if (isLoggedIn && markAsReadWhenScrolling && !pauseScrollMarkRead && lastRemovedItems) {
       lastRemovedItems.forEach((item) => {
         unreadSyncService.markEntryAsRead(stableIdExtractor(item)).then(() => {
           setLastRemovedItems((prev) => {
@@ -86,6 +103,7 @@ export function useOnViewableItemsChanged({
     lastViewableItems,
     markAsReadWhenRendering,
     markAsReadWhenScrolling,
+    pauseScrollMarkRead,
     stableIdExtractor,
   ])
 

packages/internal/hooks/src/index.ts

@@ -14,6 +14,7 @@ export * from "./useOnce"
 export * from "./usePageVisibility"
 export * from "./usePrevious"
 export * from "./useRefValue"
+export * from "./useScrollMarkReadGracePeriod"
 export * from "./useSetState"
 export * from "./useSmoothScroll"
 export * from "./useSyncTheme"