ProfileFeed cleanups (#7115)

* Clean up feed load state * Fix feed info dialog load state
bluesky-social · Dec 14, 2024 · c959dc3 · c959dc3
1 parent b806f3e
commit c959dc3
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 18 deletions.
diff --git a/src/screens/Profile/ProfileFeed/index.tsx b/src/screens/Profile/ProfileFeed/index.tsx
@@ -34,9 +34,12 @@ import {FAB} from '#/view/com/util/fab/FAB'
 import {Button} from '#/view/com/util/forms/Button'
 import {ListRef} from '#/view/com/util/List'
 import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn'
-import {LoadingScreen} from '#/view/com/util/LoadingScreen'
+import {PostFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {Text} from '#/view/com/util/text/Text'
-import {ProfileFeedHeader} from '#/screens/Profile/components/ProfileFeedHeader'
+import {
+  ProfileFeedHeader,
+  ProfileFeedHeaderSkeleton,
+} from '#/screens/Profile/components/ProfileFeedHeader'
 import * as Layout from '#/components/Layout'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFeed'>
@@ -92,12 +95,15 @@ export function ProfileFeedScreen(props: Props) {
   }
 
   return resolvedUri ? (
-    <Layout.Screen noInsetTop>
+    <Layout.Screen>
       <ProfileFeedScreenIntermediate feedUri={resolvedUri.uri} />
     </Layout.Screen>
   ) : (
     <Layout.Screen>
-      <LoadingScreen />
+      <Layout.Content>
+        <ProfileFeedHeaderSkeleton />
+        <PostFeedLoadingPlaceholder />
+      </Layout.Content>
     </Layout.Screen>
   )
 }
@@ -107,7 +113,12 @@ function ProfileFeedScreenIntermediate({feedUri}: {feedUri: string}) {
   const {data: info} = useFeedSourceInfoQuery({uri: feedUri})
 
   if (!preferences || !info) {
-    return <LoadingScreen />
+    return (
+      <Layout.Content>
+        <ProfileFeedHeaderSkeleton />
+        <PostFeedLoadingPlaceholder />
+      </Layout.Content>
+    )
   }
 
   return (

diff --git a/src/screens/Profile/components/ProfileFeedHeader.tsx b/src/screens/Profile/components/ProfileFeedHeader.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import {View} from 'react-native'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {AtUri} from '@atproto/api'
 import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -46,18 +45,53 @@ import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
 import * as Layout from '#/components/Layout'
 import {InlineLinkText} from '#/components/Link'
-import {Loader} from '#/components/Loader'
 import * as Menu from '#/components/Menu'
 import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
 import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
 
+export function ProfileFeedHeaderSkeleton() {
+  const t = useTheme()
+
+  return (
+    <Layout.Header.Outer>
+      <Layout.Header.BackButton />
+      <Layout.Header.Content>
+        <View
+          style={[
+            a.w_full,
+            a.rounded_sm,
+            t.atoms.bg_contrast_25,
+            {
+              height: 44,
+            },
+          ]}
+        />
+      </Layout.Header.Content>
+      <Layout.Header.Slot>
+        <View
+          style={[
+            a.justify_center,
+            a.align_center,
+            a.rounded_full,
+            t.atoms.bg_contrast_25,
+            {
+              height: 34,
+              width: 34,
+            },
+          ]}>
+          <Pin size="lg" fill={t.atoms.text_contrast_low.color} />
+        </View>
+      </Layout.Header.Slot>
+    </Layout.Header.Outer>
+  )
+}
+
 export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
   const t = useTheme()
   const {_, i18n} = useLingui()
   const {hasSession} = useSession()
   const {gtPhone, gtMobile} = useBreakpoints()
-  const {top} = useSafeAreaInsets()
   const infoControl = Dialog.useDialogControl()
   const playHaptic = useHaptics()
 
@@ -148,12 +182,7 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
   return (
     <>
       <Layout.Center
-        style={[
-          t.atoms.bg,
-          a.z_10,
-          {paddingTop: top},
-          web([a.sticky, a.z_10, {top: 0}]),
-        ]}>
+        style={[t.atoms.bg, a.z_10, web([a.sticky, a.z_10, {top: 0}])]}>
         <Layout.Header.Outer>
           <Layout.Header.BackButton />
           <Layout.Header.Content align="left">
@@ -356,7 +385,7 @@ function DialogInner({
   const playHaptic = useHaptics()
   const control = Dialog.useDialogContext()
   const reportDialogControl = useReportDialogControl()
-  const [rt, loading] = useRichText(info.description.text)
+  const [rt] = useRichText(info.description.text)
   const {mutateAsync: likeFeed, isPending: isLikePending} = useLikeMutation()
   const {mutateAsync: unlikeFeed, isPending: isUnlikePending} =
     useUnlikeMutation()
@@ -396,9 +425,7 @@ function DialogInner({
     reportDialogControl.open()
   }, [reportDialogControl])
 
-  return loading ? (
-    <Loader size="xl" />
-  ) : (
+  return (
     <View style={[a.gap_md]}>
       <View style={[a.flex_row, a.align_center, a.gap_md]}>
         <UserAvatar type="algo" size={48} avatar={info.avatar} />