Improve marker loading

Actually the id can be invalid (not found), and the timeline can be loaded to the right position, therefore no need to check the id anymore.

src/components/Timeline/index.tsx

@@ -1,7 +1,7 @@
 import ComponentSeparator from '@components/Separator'
 import CustomText from '@components/Text'
 import TimelineDefault from '@components/Timeline/Default'
-import { useScrollToTop } from '@react-navigation/native'
+import { useNavigation, useScrollToTop } from '@react-navigation/native'
 import { UseInfiniteQueryOptions } from '@tanstack/react-query'
 import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
 import { flattenPages } from '@utils/queryHooks/utils'
@@ -12,7 +12,8 @@ import {
 } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { RefObject, useRef, useState } from 'react'
+import { throttle } from 'lodash'
+import React, { RefObject, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FlatList, FlatListProps, Platform, RefreshControl } from 'react-native'
 import Animated, {
@@ -55,6 +56,7 @@ const Timeline: React.FC<Props> = ({
   readMarker = undefined,
   customProps
 }) => {
+  const navigation = useNavigation()
   const { colors, theme } = useTheme()
   const { t } = useTranslation('componentTimeline')
 
@@ -134,6 +136,21 @@ const Timeline: React.FC<Props> = ({
     [isFetching]
   )
 
+  const latestMarker = useRef<string>()
+  const updateMarkers = useCallback(
+    throttle(
+      () => readMarker && setAccountStorage([{ key: readMarker, value: latestMarker.current }]),
+      1000 * 15
+    ),
+    []
+  )
+  readMarker &&
+    useEffect(() => {
+      const unsubscribe = navigation.addListener('blur', () =>
+        setAccountStorage([{ key: readMarker, value: latestMarker.current }])
+      )
+      return unsubscribe
+    }, [])
   const viewabilityConfigCallbackPairs = useRef<
     Pick<FlatListProps<any>, 'viewabilityConfigCallbackPairs'>['viewabilityConfigCallbackPairs']
   >(
@@ -155,9 +172,11 @@ const Timeline: React.FC<Props> = ({
                 firstItemId &&
                 firstItemId > (marker || '0')
               ) {
-                setAccountStorage([{ key: readMarker, value: firstItemId }])
+                latestMarker.current = firstItemId
+                updateMarkers()
               } else {
-                // setAccountStorage([{ key: readMarker, value: '105250709762254246' }])
+                // latestMarker.current = '105250709762254246'
+                // updateMarkers()
               }
             }
           }
@@ -218,15 +237,11 @@ const Timeline: React.FC<Props> = ({
           <TimelineFooter queryKey={queryKey} disableInfinity={disableInfinity} />
         }
         ListEmptyComponent={<TimelineEmpty queryKey={queryKey} />}
-        ItemSeparatorComponent={({ leadingItem }) =>
+        ItemSeparatorComponent={() => (
-          queryKey[1].page === 'Toot' && queryKey[1].toot === leadingItem.id ? (
+          <ComponentSeparator
-            <ComponentSeparator extraMarginLeft={0} />
+            extraMarginLeft={StyleConstants.Avatar.M + StyleConstants.Spacing.S}
-          ) : (
+          />
-            <ComponentSeparator
+        )}
-              extraMarginLeft={StyleConstants.Avatar.M + StyleConstants.Spacing.S}
-            />
-          )
-        }
         viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
         {...(!isLoading &&
           !isFetching && {

src/utils/queryHooks/timeline.ts

@@ -61,20 +61,9 @@ export const queryFunctionTimeline = async ({
 
   let marker: string | undefined
   if (page.page === 'Following' && !pageParam?.offset && !pageParam?.min_id && !pageParam?.max_id) {
-    const storedMarker = getAccountStorage.string('read_marker_following')
+    marker = getAccountStorage.string('read_marker_following')
-    if (storedMarker) {
-      await apiInstance<Mastodon.Status[]>({
-        method: 'get',
-        url: 'timelines/home',
-        params: { limit: 1, min_id: storedMarker }
-      }).then(res => {
-        if (res.body.length) {
-          marker = storedMarker
-        }
-      })
-    }
   }
-  let params: { [key: string]: string } = marker
+  const params: { [key: string]: string } = marker
     ? { limit: 40, max_id: marker }
     : { limit: 40, ...pageParam }