handle each possible loading state (#4617)

src/screens/StarterPack/Wizard/StepFeeds.tsx

@@ -32,12 +32,17 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
   const throttledQuery = useThrottledValue(query, 500)
   const {screenReaderEnabled} = useA11y()
 
-  const {data: savedFeedsAndLists} = useSavedFeeds()
+  const {data: savedFeedsAndLists, isLoading: isLoadingSavedFeeds} =
+    useSavedFeeds()
   const savedFeeds = savedFeedsAndLists?.feeds
     .filter(f => f.type === 'feed' && f.view.uri !== DISCOVER_FEED_URI)
     .map(f => f.view) as AppBskyFeedDefs.GeneratorView[]
 
-  const {data: popularFeedsPages, fetchNextPage} = useGetPopularFeedsQuery({
+  const {
+    data: popularFeedsPages,
+    fetchNextPage,
+    isLoading: isLoadingPopularFeeds,
+  } = useGetPopularFeedsQuery({
     limit: 30,
   })
   const popularFeeds = popularFeedsPages?.pages.flatMap(p => p.feeds) ?? []
@@ -45,9 +50,12 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
     popularFeeds.filter(f => !savedFeeds.some(sf => sf.uri === f.uri)),
   )
 
-  const {data: searchedFeeds, isLoading: isLoadingSearch} =
+  const {data: searchedFeeds, isFetching: isFetchingSearchedFeeds} =
     useSearchPopularFeedsQuery({q: throttledQuery})
 
+  const isLoading =
+    isLoadingSavedFeeds || isLoadingPopularFeeds || isFetchingSearchedFeeds
+
   const renderItem = ({
     item,
   }: ListRenderItemInfo<AppBskyFeedDefs.GeneratorView>) => {
@@ -90,7 +98,7 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
         style={{flex: 1}}
         ListEmptyComponent={
           <View style={[a.flex_1, a.align_center, a.mt_lg, a.px_lg]}>
-            {isLoadingSearch ? (
+            {isLoading ? (
               <Loader size="lg" />
             ) : (
               <Text

src/screens/StarterPack/Wizard/StepProfiles.tsx

@@ -31,14 +31,20 @@ export function StepProfiles({
   const [query, setQuery] = useState('')
   const {screenReaderEnabled} = useA11y()
 
-  const {data: topPages, fetchNextPage} = useActorSearchPaginated({
+  const {
+    data: topPages,
+    fetchNextPage,
+    isLoading: isLoadingTopPages,
+  } = useActorSearchPaginated({
     query: encodeURIComponent('*'),
   })
   const topFollowers = topPages?.pages.flatMap(p => p.actors)
 
-  const {data: results, isLoading: isLoadingResults} =
+  const {data: results, isFetching: isFetchingResults} =
     useActorAutocompleteQuery(query, true, 12)
 
+  const isLoading = isLoadingTopPages || isFetchingResults
+
   const renderItem = ({
     item,
   }: ListRenderItemInfo<AppBskyActorDefs.ProfileViewBasic>) => {
@@ -80,7 +86,7 @@ export function StepProfiles({
         onEndReachedThreshold={isNative ? 2 : 0.25}
         ListEmptyComponent={
           <View style={[a.flex_1, a.align_center, a.mt_lg, a.px_lg]}>
-            {isLoadingResults ? (
+            {isLoading ? (
               <Loader size="lg" />
             ) : (
               <Text