diff --git a/src/screens/Profile/ProfileFeed/index.tsx b/src/screens/Profile/ProfileFeed/index.tsx index 7d48b5ac15..3a8686a7d9 100644 --- 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 @@ -92,12 +95,15 @@ export function ProfileFeedScreen(props: Props) { } return resolvedUri ? ( - + ) : ( - + + + + ) } @@ -107,7 +113,12 @@ function ProfileFeedScreenIntermediate({feedUri}: {feedUri: string}) { const {data: info} = useFeedSourceInfoQuery({uri: feedUri}) if (!preferences || !info) { - return + return ( + + + + + ) } return ( diff --git a/src/screens/Profile/components/ProfileFeedHeader.tsx b/src/screens/Profile/components/ProfileFeedHeader.tsx index 87b242a556..56973a049c 100644 --- 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' @@ -52,12 +51,48 @@ import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog' import {RichText} from '#/components/RichText' import {Text} from '#/components/Typography' +export function ProfileFeedHeaderSkeleton() { + const t = useTheme() + + return ( + + + + + + + + + + + + ) +} + 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 +183,7 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) { return ( <> + style={[t.atoms.bg, a.z_10, web([a.sticky, a.z_10, {top: 0}])]}>