Fix convo header loading state (#7603)

* get initial convo state from cache

* undo useConvoQuery changes

* fix shadowing situation with new hook

3 files changed, 35 insertions, 25 deletions

diff --git a/src/components/dms/ConvoMenu.tsx b/src/components/dms/ConvoMenu.tsx
index 5b4b68149..29b6aeab1 100644
--- a/src/components/dms/ConvoMenu.tsx
+++ b/src/components/dms/ConvoMenu.tsx
@@ -73,13 +73,14 @@ let ConvoMenu = ({
   const isBlocking = userBlock || !!listBlocks.length
   const isDeletedAccount = profile.handle === 'missing.invalid'
 
+  const convoId = initialConvo.id
   const {data: convo} = useConvoQuery(initialConvo)
 
   const onNavigateToProfile = useCallback(() => {
     navigation.navigate('Profile', {name: profile.did})
   }, [navigation, profile.did])
 
-  const {mutate: muteConvo} = useMuteConvo(convo?.id, {
+  const {mutate: muteConvo} = useMuteConvo(convoId, {
     onSuccess: data => {
       if (data.convo.muted) {
         Toast.show(_(msg`Chat muted`))
@@ -152,11 +153,7 @@ let ConvoMenu = ({
               {showMarkAsRead && (
                 <Menu.Item
                   label={_(msg`Mark as read`)}
-                  onPress={() =>
-                    markAsRead({
-                      convoId: convo?.id,
-                    })
-                  }>
+                  onPress={() => markAsRead({convoId})}>
                   <Menu.ItemText>
                     <Trans>Mark as read</Trans>
                   </Menu.ItemText>
@@ -222,7 +219,7 @@ let ConvoMenu = ({
 
       <LeaveConvoPrompt
         control={leaveConvoControl}
-        convoId={convo.id}
+        convoId={convoId}
         currentScreen={currentScreen}
       />
       {latestReportableMessage ? (
@@ -230,7 +227,7 @@ let ConvoMenu = ({
           currentScreen={currentScreen}
           params={{
             type: 'convoMessage',
-            convoId: convo.id,
+            convoId: convoId,
             message: latestReportableMessage,
           }}
           control={reportControl}
diff --git a/src/components/dms/MessagesListBlockedFooter.tsx b/src/components/dms/MessagesListBlockedFooter.tsx
index ec7ba2855..19a7cc9c2 100644
--- a/src/components/dms/MessagesListBlockedFooter.tsx
+++ b/src/components/dms/MessagesListBlockedFooter.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {View} from 'react-native'
-import {AppBskyActorDefs, ModerationCause} from '@atproto/api'
+import {AppBskyActorDefs, ModerationDecision} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -19,15 +19,12 @@ export function MessagesListBlockedFooter({
   recipient: initialRecipient,
   convoId,
   hasMessages,
-  blockInfo,
+  moderation,
 }: {
   recipient: AppBskyActorDefs.ProfileViewBasic
   convoId: string
   hasMessages: boolean
-  blockInfo: {
-    listBlocks: ModerationCause[]
-    userBlock: ModerationCause | undefined
-  }
+  moderation: ModerationDecision
 }) {
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
@@ -39,7 +36,17 @@ export function MessagesListBlockedFooter({
   const reportControl = useDialogControl()
   const blockedByListControl = useDialogControl()
 
-  const {listBlocks, userBlock} = blockInfo
+  const {listBlocks, userBlock} = React.useMemo(() => {
+    const modui = moderation.ui('profileView')
+    const blocks = modui.alerts.filter(alert => alert.type === 'blocking')
+    const listBlocks = blocks.filter(alert => alert.source.type === 'list')
+    const userBlock = blocks.find(alert => alert.source.type === 'user')
+    return {
+      listBlocks,
+      userBlock,
+    }
+  }, [moderation])
+
   const isBlocking = !!userBlock || !!listBlocks.length
 
   const onUnblockPress = React.useCallback(() => {
diff --git a/src/components/dms/MessagesListHeader.tsx b/src/components/dms/MessagesListHeader.tsx
index 6ac64a712..f8d9b290d 100644
--- a/src/components/dms/MessagesListHeader.tsx
+++ b/src/components/dms/MessagesListHeader.tsx
@@ -15,7 +15,7 @@ import {makeProfileLink} from '#/lib/routes/links'
 import {NavigationProp} from '#/lib/routes/types'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {isWeb} from '#/platform/detection'
-import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {Shadow} from '#/state/cache/profile-shadow'
 import {isConvoActive, useConvo} from '#/state/messages/convo'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
@@ -30,20 +30,27 @@ const PFP_SIZE = isWeb ? 40 : 34
 export let MessagesListHeader = ({
   profile,
   moderation,
-  blockInfo,
 }: {
-  profile?: AppBskyActorDefs.ProfileViewBasic
+  profile?: Shadow<AppBskyActorDefs.ProfileViewBasic>
   moderation?: ModerationDecision
-  blockInfo?: {
-    listBlocks: ModerationCause[]
-    userBlock?: ModerationCause
-  }
 }): React.ReactNode => {
   const t = useTheme()
   const {_} = useLingui()
   const {gtTablet} = useBreakpoints()
   const navigation = useNavigation<NavigationProp>()
 
+  const blockInfo = React.useMemo(() => {
+    if (!moderation) return
+    const modui = moderation.ui('profileView')
+    const blocks = modui.alerts.filter(alert => alert.type === 'blocking')
+    const listBlocks = blocks.filter(alert => alert.source.type === 'list')
+    const userBlock = blocks.find(alert => alert.source.type === 'user')
+    return {
+      listBlocks,
+      userBlock,
+    }
+  }, [moderation])
+
   const onPressBack = useCallback(() => {
     if (isWeb) {
       navigation.replace('Messages', {})
@@ -127,11 +134,11 @@ export let MessagesListHeader = ({
 MessagesListHeader = React.memo(MessagesListHeader)
 
 function HeaderReady({
-  profile: profileUnshadowed,
+  profile,
   moderation,
   blockInfo,
 }: {
-  profile: AppBskyActorDefs.ProfileViewBasic
+  profile: Shadow<AppBskyActorDefs.ProfileViewBasic>
   moderation: ModerationDecision
   blockInfo: {
     listBlocks: ModerationCause[]
@@ -141,7 +148,6 @@ function HeaderReady({
   const {_} = useLingui()
   const t = useTheme()
   const convoState = useConvo()
-  const profile = useProfileShadow(profileUnshadowed)
 
   const isDeletedAccount = profile?.handle === 'missing.invalid'
   const displayName = isDeletedAccount