Add profile loading shim (#1940)

src/view/com/modals/ProfilePreview.tsx

@@ -11,12 +11,14 @@ import {s} from 'lib/styles'
 import {useModerationOpts} from '#/state/queries/preferences'
 import {useProfileQuery} from '#/state/queries/profile'
 import {ErrorScreen} from '../util/error/ErrorScreen'
+import {CenteredView} from '../util/Views'
 import {cleanError} from '#/lib/strings/errors'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 
 export const snapPoints = [520, '100%']
 
 export function Component({did}: {did: string}) {
+  const pal = usePalette('default')
   const moderationOpts = useModerationOpts()
   const {
     data: profile,
@@ -30,9 +32,13 @@ export function Component({did}: {did: string}) {
 
   if (isFetchingProfile || !moderationOpts) {
     return (
-      <View style={s.p20}>
-        <ActivityIndicator size="large" />
-      </View>
+      <CenteredView style={[pal.view, s.flex1]}>
+        <ProfileHeader
+          profile={null}
+          moderation={null}
+          isProfilePreview={true}
+        />
+      </CenteredView>
     )
   }
   if (profileError) {

src/view/com/profile/ProfileHeader.tsx

@@ -53,8 +53,8 @@ import {useSession} from '#/state/session'
 import {Shadow} from '#/state/cache/types'
 
 interface Props {
-  profile: Shadow<AppBskyActorDefs.ProfileViewDetailed>
-  moderation: ProfileModeration
+  profile: Shadow<AppBskyActorDefs.ProfileViewDetailed> | null
+  moderation: ProfileModeration | null
   hideBackButton?: boolean
   isProfilePreview?: boolean
 }
@@ -69,7 +69,7 @@ export function ProfileHeader({
 
   // loading
   // =
-  if (!profile) {
+  if (!profile || !moderation) {
     return (
       <View style={pal.view}>
         <LoadingPlaceholder width="100%" height={153} />
@@ -81,11 +81,6 @@ export function ProfileHeader({
           <View style={[styles.buttonsLine]}>
             <LoadingPlaceholder width={167} height={31} style={styles.br50} />
           </View>
-          <View>
-            <Text type="title-2xl" style={[pal.text, styles.title]}>
-              <Trans>Loading...</Trans>
-            </Text>
-          </View>
         </View>
       </View>
     )
@@ -103,12 +98,19 @@ export function ProfileHeader({
   )
 }
 
+interface LoadedProps {
+  profile: Shadow<AppBskyActorDefs.ProfileViewDetailed>
+  moderation: ProfileModeration
+  hideBackButton?: boolean
+  isProfilePreview?: boolean
+}
+
 function ProfileHeaderLoaded({
   profile,
   moderation,
   hideBackButton = false,
   isProfilePreview,
-}: Props) {
+}: LoadedProps) {
   const pal = usePalette('default')
   const palInverted = usePalette('inverted')
   const {currentAccount} = useSession()

src/view/screens/Profile.tsx

@@ -1,5 +1,5 @@
 import React, {useMemo} from 'react'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
+import {StyleSheet, View} from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
 import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
 import {msg} from '@lingui/macro'
@@ -73,9 +73,11 @@ export const ProfileScreen = withAuthRequired(function ProfileScreenImpl({
   if (isFetchingDid || isFetchingProfile || !moderationOpts) {
     return (
       <CenteredView>
-        <View style={s.p20}>
-          <ActivityIndicator size="large" />
-        </View>
+        <ProfileHeader
+          profile={null}
+          moderation={null}
+          isProfilePreview={true}
+        />
       </CenteredView>
     )
   }
@@ -158,12 +160,6 @@ function ProfileScreenLoaded({
     ].filter(Boolean) as string[]
   }, [showLikesTab, showFeedsTab, showListsTab])
 
-  /*
-    - todo
-        - feeds
-        - lists
-    */
-
   useFocusEffect(
     React.useCallback(() => {
       setMinimalShellMode(false)