Fix blank home screen (close #2281) (#2291)

src/state/queries/feed.ts

@@ -218,11 +218,13 @@ const FOLLOWING_FEED_STUB: FeedSourceInfo = {
 export function usePinnedFeedsInfos(): {
   feeds: FeedSourceInfo[]
   hasPinnedCustom: boolean
+  isLoading: boolean
 } {
   const queryClient = useQueryClient()
   const [tabs, setTabs] = React.useState<FeedSourceInfo[]>([
     FOLLOWING_FEED_STUB,
   ])
+  const [isLoading, setLoading] = React.useState(true)
   const {data: preferences} = usePreferencesQuery()
 
   const hasPinnedCustom = React.useMemo<boolean>(() => {
@@ -284,10 +286,11 @@ export function usePinnedFeedsInfos(): {
       ) as FeedSourceInfo[]
 
       setTabs([FOLLOWING_FEED_STUB].concat(views))
+      setLoading(false)
     }
 
     fetchFeedInfo()
   }, [queryClient, setTabs, preferences?.feeds?.pinned])
 
-  return {feeds: tabs, hasPinnedCustom}
+  return {feeds: tabs, hasPinnedCustom, isLoading}
 }

src/view/screens/Home.tsx

@@ -18,11 +18,13 @@ import {emitSoftReset} from '#/state/events'
 import {useSession} from '#/state/session'
 import {loadString, saveString} from '#/lib/storage'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {clamp} from '#/lib/numbers'
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
 export function HomeScreen(props: Props) {
   const {data: preferences} = usePreferencesQuery()
-  const {feeds: pinnedFeeds} = usePinnedFeedsInfos()
+  const {feeds: pinnedFeeds, isLoading: isPinnedFeedsLoading} =
+    usePinnedFeedsInfos()
   const {isDesktop} = useWebMediaQueries()
   const [initialPage, setInitialPage] = React.useState<string | undefined>(
     undefined,
@@ -41,7 +43,12 @@ export function HomeScreen(props: Props) {
     loadLastActivePage()
   }, [])
 
-  if (preferences && pinnedFeeds && initialPage !== undefined) {
+  if (
+    preferences &&
+    pinnedFeeds &&
+    initialPage !== undefined &&
+    !isPinnedFeedsLoading
+  ) {
     return (
       <HomeScreenReady
         {...props}
@@ -172,7 +179,7 @@ function HomeScreenReady({
     <Pager
       key={pinnedFeedOrderKey}
       testID="homeScreen"
-      initialPage={selectedPageIndex}
+      initialPage={clamp(selectedPageIndex, 0, customFeeds.length)}
       onPageSelected={onPageSelected}
       onPageScrollStateChanged={onPageScrollStateChanged}
       renderTabBar={renderTabBar}