Fix blank feed (#1935)

* Split feed into two components

* Rm unused

* Add a spinner

src/view/screens/Home.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types'
 import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
@@ -7,28 +8,41 @@ import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
 import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed'
 import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState'
 import {FeedsTabBar} from '../com/pager/FeedsTabBar'
-import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
+import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {FeedPage} from 'view/com/feeds/FeedPage'
 import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell'
 import {usePreferencesQuery} from '#/state/queries/preferences'
+import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
 import {emitSoftReset} from '#/state/events'
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
-export const HomeScreen = withAuthRequired(function HomeScreenImpl({}: Props) {
+export const HomeScreen = withAuthRequired(function HomeScreenImpl(
+  props: Props,
+) {
+  const {data: preferences} = usePreferencesQuery()
+  if (preferences) {
+    return <HomeScreenReady {...props} preferences={preferences} />
+  } else {
+    return (
+      <View style={styles.loading}>
+        <ActivityIndicator size="large" />
+      </View>
+    )
+  }
+})
+
+function HomeScreenReady({
+  preferences,
+}: Props & {
+  preferences: UsePreferencesQueryResponse
+}) {
   const setMinimalShellMode = useSetMinimalShellMode()
   const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
-  const pagerRef = React.useRef<PagerRef>(null)
   const [selectedPage, setSelectedPage] = React.useState(0)
-  const [customFeeds, setCustomFeeds] = React.useState<FeedDescriptor[]>([])
-  const {data: preferences} = usePreferencesQuery()
-
-  React.useEffect(() => {
-    if (!preferences?.feeds?.pinned) return
 
+  const customFeeds = React.useMemo(() => {
     const pinned = preferences.feeds.pinned
-
     const feeds: FeedDescriptor[] = []
-
     for (const uri of pinned) {
       if (uri.includes('app.bsky.feed.generator')) {
         feeds.push(`feedgen|${uri}`)
@@ -36,15 +50,10 @@ export const HomeScreen = withAuthRequired(function HomeScreenImpl({}: Props) {
         feeds.push(`list|${uri}`)
       }
     }
-
-    setCustomFeeds(feeds)
-
-    pagerRef.current?.setPage(0)
-  }, [preferences?.feeds?.pinned, setCustomFeeds, pagerRef])
+    return feeds
+  }, [preferences.feeds.pinned])
 
   const homeFeedParams = React.useMemo<FeedParams>(() => {
-    if (!preferences) return {}
-
     return {
       mergeFeedEnabled: Boolean(preferences.feedViewPrefs.lab_mergeFeedEnabled),
       mergeFeedSources: preferences.feeds.saved,
@@ -108,7 +117,6 @@ export const HomeScreen = withAuthRequired(function HomeScreenImpl({}: Props) {
 
   return (
     <Pager
-      ref={pagerRef}
       testID="homeScreen"
       onPageSelected={onPageSelected}
       onPageScrollStateChanged={onPageScrollStateChanged}
@@ -136,4 +144,13 @@ export const HomeScreen = withAuthRequired(function HomeScreenImpl({}: Props) {
       })}
     </Pager>
   )
+}
+
+const styles = StyleSheet.create({
+  loading: {
+    height: '100%',
+    alignContent: 'center',
+    justifyContent: 'center',
+    paddingBottom: 100,
+  },
 })