Wait for preferences before showing suggested feeds (#4618)

src/screens/StarterPack/Wizard/StepFeeds.tsx

@@ -32,7 +32,7 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
   const throttledQuery = useThrottledValue(query, 500)
   const {screenReaderEnabled} = useA11y()
 
-  const {data: savedFeedsAndLists, isLoading: isLoadingSavedFeeds} =
+  const {data: savedFeedsAndLists, isFetchedAfterMount: isFetchedSavedFeeds} =
     useSavedFeeds()
   const savedFeeds = savedFeedsAndLists?.feeds
     .filter(f => f.type === 'feed' && f.view.uri !== DISCOVER_FEED_URI)
@@ -46,15 +46,23 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
     limit: 30,
   })
   const popularFeeds = popularFeedsPages?.pages.flatMap(p => p.feeds) ?? []
-  const suggestedFeeds = savedFeeds.concat(
-    popularFeeds.filter(f => !savedFeeds.some(sf => sf.uri === f.uri)),
-  )
+
+  // If we have saved feeds already loaded, display them immediately
+  // Then, when popular feeds have loaded we can concat them to the saved feeds
+  const suggestedFeeds =
+    savedFeeds || isFetchedSavedFeeds
+      ? popularFeeds
+        ? savedFeeds.concat(
+            popularFeeds.filter(f => !savedFeeds.some(sf => sf.uri === f.uri)),
+          )
+        : savedFeeds
+      : undefined
 
   const {data: searchedFeeds, isFetching: isFetchingSearchedFeeds} =
     useSearchPopularFeedsQuery({q: throttledQuery})
 
   const isLoading =
-    isLoadingSavedFeeds || isLoadingPopularFeeds || isFetchingSearchedFeeds
+    !isFetchedSavedFeeds || isLoadingPopularFeeds || isFetchingSearchedFeeds
 
   const renderItem = ({
     item,