Fix loading jumps and footer on feeds tab (#8063)

* Fix loading jumps and footer on feeds tab

* same for lists/starter packs

1 files changed, 32 insertions, 27 deletions

diff --git a/src/components/StarterPack/ProfileStarterPacks.tsx b/src/components/StarterPack/ProfileStarterPacks.tsx
index da5f0dc6a..d56789506 100644
--- a/src/components/StarterPack/ProfileStarterPacks.tsx
+++ b/src/components/StarterPack/ProfileStarterPacks.tsx
@@ -6,12 +6,12 @@ import React, {
 } from 'react'
 import {
   findNodeHandle,
-  ListRenderItemInfo,
-  StyleProp,
+  type ListRenderItemInfo,
+  type StyleProp,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
-import {AppBskyGraphDefs} from '@atproto/api'
+import {type AppBskyGraphDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -20,11 +20,11 @@ import {useGenerateStarterPackMutation} from '#/lib/generate-starterpack'
 import {useBottomBarOffset} from '#/lib/hooks/useBottomBarOffset'
 import {useEmail} from '#/lib/hooks/useEmail'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {parseStarterPackUri} from '#/lib/strings/starter-pack'
 import {logger} from '#/logger'
 import {useActorStarterPacksQuery} from '#/state/queries/actor-starter-packs'
-import {List, ListRef} from '#/view/com/util/List'
+import {List, type ListRef} from '#/view/com/util/List'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {atoms as a, ios, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -75,8 +75,14 @@ export const ProfileStarterPacks = React.forwardRef<
   const t = useTheme()
   const bottomBarOffset = useBottomBarOffset(100)
   const [isPTRing, setIsPTRing] = useState(false)
-  const {data, refetch, isFetching, hasNextPage, fetchNextPage} =
-    useActorStarterPacksQuery({did, enabled})
+  const {
+    data,
+    refetch,
+    isError,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useActorStarterPacksQuery({did, enabled})
   const {isTabletOrDesktop} = useWebMediaQueries()
 
   const items = data?.pages.flatMap(page => page.starterPacks)
@@ -95,15 +101,14 @@ export const ProfileStarterPacks = React.forwardRef<
     setIsPTRing(false)
   }, [refetch, setIsPTRing])
 
-  const onEndReached = useCallback(async () => {
-    if (isFetching || !hasNextPage) return
-
+  const onEndReached = React.useCallback(async () => {
+    if (isFetchingNextPage || !hasNextPage || isError) return
     try {
       await fetchNextPage()
     } catch (err) {
       logger.error('Failed to load more starter packs', {message: err})
     }
-  }, [isFetching, hasNextPage, fetchNextPage])
+  }, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])
 
   useEffect(() => {
     if (enabled && scrollElRef.current) {
@@ -112,21 +117,21 @@ export const ProfileStarterPacks = React.forwardRef<
     }
   }, [enabled, scrollElRef, setScrollViewTag])
 
-  const renderItem = ({
-    item,
-    index,
-  }: ListRenderItemInfo<AppBskyGraphDefs.StarterPackView>) => {
-    return (
-      <View
-        style={[
-          a.p_lg,
-          (isTabletOrDesktop || index !== 0) && a.border_t,
-          t.atoms.border_contrast_low,
-        ]}>
-        <StarterPackCard starterPack={item} />
-      </View>
-    )
-  }
+  const renderItem = useCallback(
+    ({item, index}: ListRenderItemInfo<AppBskyGraphDefs.StarterPackView>) => {
+      return (
+        <View
+          style={[
+            a.p_lg,
+            (isTabletOrDesktop || index !== 0) && a.border_t,
+            t.atoms.border_contrast_low,
+          ]}>
+          <StarterPackCard starterPack={item} />
+        </View>
+      )
+    },
+    [isTabletOrDesktop, t.atoms.border_contrast_low],
+  )
 
   return (
     <View testID={testID} style={style}>