Use consistent spinners for loading screens (#2611)

* Use consistent spinners for loading screens

* Consolidate into LoadingScreen

src/view/com/post-thread/PostLikedBy.tsx

@@ -6,6 +6,7 @@ import {List} from '../util/List'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {ProfileCardWithFollowBtn} from '../profile/ProfileCard'
 import {logger} from '#/logger'
+import {LoadingScreen} from '../util/LoadingScreen'
 import {useResolveUriQuery} from '#/state/queries/resolve-uri'
 import {usePostLikedByQuery} from '#/state/queries/post-liked-by'
 import {cleanError} from '#/lib/strings/errors'
@@ -60,11 +61,7 @@ export function PostLikedBy({uri}: {uri: string}) {
   }, [])
 
   if (isFetchingResolvedUri || !isFetched) {
-    return (
+    return <LoadingScreen />
-      <CenteredView>
-        <ActivityIndicator />
-      </CenteredView>
-    )
   }
 
   // error

src/view/com/post-thread/PostRepostedBy.tsx

@@ -6,6 +6,7 @@ import {List} from '../util/List'
 import {ProfileCardWithFollowBtn} from '../profile/ProfileCard'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {logger} from '#/logger'
+import {LoadingScreen} from '../util/LoadingScreen'
 import {useResolveUriQuery} from '#/state/queries/resolve-uri'
 import {usePostRepostedByQuery} from '#/state/queries/post-reposted-by'
 import {cleanError} from '#/lib/strings/errors'
@@ -61,11 +62,7 @@ export function PostRepostedBy({uri}: {uri: string}) {
   )
 
   if (isFetchingResolvedUri || !isFetched) {
-    return (
+    return <LoadingScreen />
-      <CenteredView>
-        <ActivityIndicator />
-      </CenteredView>
-    )
   }
 
   // error

src/view/com/post-thread/PostThread.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-native'
 import {AppBskyFeedDefs} from '@atproto/api'
 import {CenteredView} from '../util/Views'
+import {LoadingScreen} from '../util/LoadingScreen'
 import {List, ListMethods} from '../util/List'
 import {
   FontAwesomeIcon,
@@ -125,13 +126,7 @@ export function PostThread({
     return <PostThreadBlocked />
   }
   if (!thread || isLoading || !preferences) {
-    return (
+    return <LoadingScreen />
-      <CenteredView>
-        <View style={s.p20}>
-          <ActivityIndicator size="large" />
-        </View>
-      </CenteredView>
-    )
   }
   return (
     <PostThreadLoaded

src/view/com/profile/ProfileFollowers.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {ActivityIndicator, StyleSheet, View} from 'react-native'
 import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
 import {CenteredView} from '../util/Views'
+import {LoadingScreen} from '../util/LoadingScreen'
 import {List} from '../util/List'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {ProfileCardWithFollowBtn} from './ProfileCard'
@@ -62,11 +63,7 @@ export function ProfileFollowers({name}: {name: string}) {
   )
 
   if (isFetchingDid || !isFetched) {
-    return (
+    return <LoadingScreen />
-      <CenteredView>
-        <ActivityIndicator />
-      </CenteredView>
-    )
   }
 
   // error

src/view/com/profile/ProfileFollows.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {ActivityIndicator, StyleSheet, View} from 'react-native'
 import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
 import {CenteredView} from '../util/Views'
+import {LoadingScreen} from '../util/LoadingScreen'
 import {List} from '../util/List'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {ProfileCardWithFollowBtn} from './ProfileCard'
@@ -62,11 +63,7 @@ export function ProfileFollows({name}: {name: string}) {
   )
 
   if (isFetchingDid || !isFetched) {
-    return (
+    return <LoadingScreen />
-      <CenteredView>
-        <ActivityIndicator />
-      </CenteredView>
-    )
   }
 
   // error

src/view/com/util/LoadingScreen.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import {ActivityIndicator, View} from 'react-native'
+import {s} from 'lib/styles'
+import {CenteredView} from './Views'
+
+export function LoadingScreen() {
+  return (
+    <CenteredView>
+      <View style={s.p20}>
+        <ActivityIndicator size="large" />
+      </View>
+    </CenteredView>
+  )
+}

src/view/screens/ProfileFeed.tsx

@@ -1,5 +1,5 @@
 import React, {useMemo, useCallback} from 'react'
-import {Dimensions, StyleSheet, View, ActivityIndicator} from 'react-native'
+import {Dimensions, StyleSheet, View} from 'react-native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {useIsFocused, useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
@@ -21,6 +21,7 @@ import {RichText} from 'view/com/util/text/RichText'
 import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
 import {FAB} from 'view/com/util/fab/FAB'
 import {EmptyState} from 'view/com/util/EmptyState'
+import {LoadingScreen} from 'view/com/util/LoadingScreen'
 import * as Toast from 'view/com/util/Toast'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
@@ -118,11 +119,7 @@ export function ProfileFeedScreen(props: Props) {
   return resolvedUri ? (
     <ProfileFeedScreenIntermediate feedUri={resolvedUri.uri} />
   ) : (
-    <CenteredView>
+    <LoadingScreen />
-      <View style={s.p20}>
-        <ActivityIndicator size="large" />
-      </View>
-    </CenteredView>
   )
 }
 
@@ -131,13 +128,7 @@ function ProfileFeedScreenIntermediate({feedUri}: {feedUri: string}) {
   const {data: info} = useFeedSourceInfoQuery({uri: feedUri})
 
   if (!preferences || !info) {
-    return (
+    return <LoadingScreen />
-      <CenteredView>
-        <View style={s.p20}>
-          <ActivityIndicator size="large" />
-        </View>
-      </CenteredView>
-    )
   }
 
   return (

src/view/screens/ProfileList.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useMemo} from 'react'
-import {ActivityIndicator, Pressable, StyleSheet, View} from 'react-native'
+import {Pressable, StyleSheet, View} from 'react-native'
 import {useFocusEffect, useIsFocused} from '@react-navigation/native'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {useNavigation} from '@react-navigation/native'
@@ -13,6 +13,7 @@ import {Text} from 'view/com/util/text/Text'
 import {NativeDropdown, DropdownItem} from 'view/com/util/forms/NativeDropdown'
 import {CenteredView} from 'view/com/util/Views'
 import {EmptyState} from 'view/com/util/EmptyState'
+import {LoadingScreen} from 'view/com/util/LoadingScreen'
 import {RichText} from 'view/com/util/text/RichText'
 import {Button} from 'view/com/util/forms/Button'
 import {TextLink} from 'view/com/util/Link'
@@ -97,11 +98,7 @@ export function ProfileListScreen(props: Props) {
   return resolvedUri && list ? (
     <ProfileListScreenLoaded {...props} uri={resolvedUri.uri} list={list} />
   ) : (
-    <CenteredView>
+    <LoadingScreen />
-      <View style={s.p20}>
-        <ActivityIndicator size="large" />
-      </View>
-    </CenteredView>
   )
 }