fix(mobile): stabilize timeline initial load and scroll position (#4856)

Author: DIYgod

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

@@ -39,7 +39,7 @@ export const EntryListContentArticle = ({
   const extraData: EntryExtraData = useMemo(() => ({ entryIds }), [entryIds])
 
   const { fetchNextPage, isFetching, refetch, isRefetching, hasNextPage, fetchedTime, isReady } =
-    useEntries()
+    useEntries({ viewId: view, active })
 
   const renderItem = useCallback(
     ({ item: id, extraData, index }: ListRenderItemInfo<string>) => (

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

@@ -1,3 +1,4 @@
+import type { FeedViewType } from "@follow/constants"
 import { isFreeRole } from "@follow/constants"
 import { useTypeScriptHappyCallback } from "@follow/hooks"
 import { usePrefetchEntryTranslation } from "@follow/store/translation/hooks"
@@ -30,15 +31,19 @@ export const EntryListContentPicture = ({
   ref: forwardRef,
   entryIds,
   active,
+  view,
   ...rest
-}: { entryIds: string[] | null; active?: boolean } & Omit<
+}: { entryIds: string[] | null; active?: boolean; view: FeedViewType } & Omit<
   FlashListProps<string>,
   "data" | "renderItem"
 > & { ref?: React.Ref<ElementRef<typeof TimelineSelectorMasonryList> | null> }) => {
   const ref = useRef<FlashListRef<any>>(null)
 
   useImperativeHandle(forwardRef, () => ref.current!)
-  const { fetchNextPage, refetch, isRefetching, hasNextPage, isFetching, isReady } = useEntries()
+  const { fetchNextPage, refetch, isRefetching, hasNextPage, isFetching, isReady } = useEntries({
+    viewId: view,
+    active,
+  })
   const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
     disabled: active === false || isFetching,
   })

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

@@ -1,3 +1,4 @@
+import type { FeedViewType } from "@follow/constants"
 import { isFreeRole } from "@follow/constants"
 import { usePrefetchEntryTranslation } from "@follow/store/translation/hooks"
 import { useUserRole } from "@follow/store/user/hooks"
@@ -20,10 +21,14 @@ export const EntryListContentSocial = ({
   ref: forwardRef,
   entryIds,
   active,
-}: { entryIds: string[] | null; active?: boolean } & {
+  view,
+}: { 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, refetch, isRefetching, hasNextPage, isReady } = useEntries({
+    viewId: view,
+    active,
+  })
   const extraData: EntryExtraData = useMemo(() => ({ entryIds }), [entryIds])
 
   const ref = useRef<FlashListRef<any>>(null)

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

@@ -1,3 +1,4 @@
+import type { FeedViewType } from "@follow/constants"
 import { isFreeRole } from "@follow/constants"
 import { useTypeScriptHappyCallback } from "@follow/hooks"
 import { usePrefetchEntryTranslation } from "@follow/store/translation/hooks"
@@ -23,14 +24,18 @@ export const EntryListContentVideo = ({
   ref: forwardRef,
   entryIds,
   active,
+  view,
   ...rest
-}: { entryIds: string[] | null; active?: boolean } & Omit<
+}: { entryIds: string[] | null; active?: boolean; view: FeedViewType } & Omit<
   FlashListProps<string>,
   "data" | "renderItem"
 > & { ref?: React.Ref<ElementRef<typeof TimelineSelectorMasonryList> | null> }) => {
   const ref = useRef<FlashListRef<any>>(null)
   useImperativeHandle(forwardRef, () => ref.current!)
-  const { fetchNextPage, refetch, isRefetching, isFetching, hasNextPage, isReady } = useEntries()
+  const { fetchNextPage, refetch, isRefetching, isFetching, hasNextPage, isReady } = useEntries({
+    viewId: view,
+    active,
+  })
   const { onViewableItemsChanged, onScroll, viewableItems } = useOnViewableItemsChanged({
     disabled: active === false || isFetching,
   })

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

@@ -2,7 +2,7 @@ import { FeedViewType } from "@follow/constants"
 import { useWhoami } from "@follow/store/user/hooks"
 import type { FlashListRef } from "@shopify/flash-list"
 import type { RefObject } from "react"
-import { useEffect } from "react"
+import { useEffect, useRef } from "react"
 
 import { useGeneralSettingKey } from "@/src/atoms/settings/general"
 import { withErrorBoundary } from "@/src/components/common/ErrorBoundary"
@@ -60,17 +60,33 @@ function EntryListSelectorImpl({ entryIds, viewId, active = true }: EntryListSel
   useEffect(() => {
     ref?.current?.scrollToOffset({
       offset: 0,
+      animated: false,
     })
   }, [unreadOnly, ref])
 
-  const { isRefetching } = useEntries()
+  const { isReady } = useEntries({ viewId, active })
+  const hasResetAfterReadyRef = useRef(false)
   useEffect(() => {
-    if (isRefetching) {
+    if (!active) return
+    if (!isReady) {
+      hasResetAfterReadyRef.current = false
+      return
+    }
+    if (!entryIds?.length) return
+    if (hasResetAfterReadyRef.current) return
+
+    const frameId = requestAnimationFrame(() => {
       ref?.current?.scrollToOffset({
         offset: 0,
+        animated: false,
       })
+    })
+    hasResetAfterReadyRef.current = true
+
+    return () => {
+      cancelAnimationFrame(frameId)
     }
-  }, [isRefetching, ref])
+  }, [active, entryIds, isReady, ref, viewId])
 
   useEffect(() => {
     if (!active) return

apps/mobile/src/modules/screen/atoms.ts

@@ -318,6 +318,34 @@ export function useEntries(props?: UseEntriesProps): UseEntriesReturn {
   const { viewId, active = true } = props || {}
   const remoteQuery = useRemoteEntries({ viewId, active })
   const localQuery = useLocalEntries({ viewId, active })
+  const entryListContext = useEntryListContext()
+  const selectedFeed = useSelectedFeed()
+
+  const isTimelineViewQuery = entryListContext.type === "timeline" && selectedFeed?.type === "view"
+
+  if (isTimelineViewQuery) {
+    if (remoteQuery.isReady) {
+      return remoteQuery
+    }
+
+    if (remoteQuery.error) {
+      return {
+        ...localQuery,
+        error: remoteQuery.error,
+        isReady: true,
+      }
+    }
+
+    return {
+      ...fallbackReturn,
+      refetch: remoteQuery.refetch,
+      fetchNextPage: remoteQuery.fetchNextPage,
+      isLoading: remoteQuery.isLoading,
+      isFetching: remoteQuery.isFetching,
+      isRefetching: remoteQuery.isRefetching,
+    }
+  }
+
   const query = remoteQuery.isReady ? remoteQuery : localQuery
   return {
     ...query,