Cache profile view before opening AfterReportDialog (#9962)

src/components/dms/AfterReportDialog.tsx

@@ -69,13 +69,13 @@ function DialogInner({
   const control = Dialog.useDialogContext()
   const {
     data: profile,
-    isLoading,
+    isPending,
     isError,
   } = useProfileQuery({
     did: params.message.sender.did,
   })
 
-  return isLoading ? (
+  return isPending ? (
     <View style={[a.w_full, a.py_5xl, a.align_center]}>
       <Loader size="lg" />
     </View>

src/components/dms/ConvoMenu.tsx

@@ -5,6 +5,7 @@ import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
 import {useNavigation} from '@react-navigation/native'
+import {useQueryClient} from '@tanstack/react-query'
 
 import {type NavigationProp} from '#/lib/routes/types'
 import {type Shadow} from '#/state/cache/types'
@@ -13,7 +14,10 @@ import {
   useMarkAsReadMutation,
 } from '#/state/queries/messages/conversation'
 import {useMuteConvo} from '#/state/queries/messages/mute-conversation'
-import {useProfileBlockMutationQueue} from '#/state/queries/profile'
+import {
+  unstableCacheProfileView,
+  useProfileBlockMutationQueue,
+} from '#/state/queries/profile'
 import * as Toast from '#/view/com/util/Toast'
 import {type ViewStyleProp} from '#/alf'
 import {atoms as a} from '#/alf'
@@ -63,6 +67,7 @@ let ConvoMenu = ({
   style?: ViewStyleProp['style']
 }): React.ReactNode => {
   const {_} = useLingui()
+  const queryClient = useQueryClient()
 
   const leaveConvoControl = Prompt.usePromptControl()
   const reportControl = Prompt.usePromptControl()
@@ -125,6 +130,12 @@ let ConvoMenu = ({
             }}
             control={reportControl}
             onAfterSubmit={() => {
+              const sender = convo.members.find(
+                member => member.did === latestReportableMessage.sender.did,
+              )
+              if (sender) {
+                unstableCacheProfileView(queryClient, sender)
+              }
               blockOrDeleteControl.open()
             }}
           />

src/components/dms/MessageContextMenu.tsx

@@ -4,11 +4,13 @@ import * as Clipboard from 'expo-clipboard'
 import {type ChatBskyConvoDefs, RichText} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
+import {useQueryClient} from '@tanstack/react-query'
 
 import {useTranslate} from '#/lib/hooks/useTranslate'
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
 import {useConvoActive} from '#/state/messages/convo'
 import {useLanguagePrefs} from '#/state/preferences'
+import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache'
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import * as ContextMenu from '#/components/ContextMenu'
@@ -36,6 +38,7 @@ export let MessageContextMenu = ({
   const {_} = useLingui()
   const ax = useAnalytics()
   const {currentAccount} = useSession()
+  const queryClient = useQueryClient()
   const convo = useConvoActive()
   const deleteControl = usePromptControl()
   const reportControl = usePromptControl()
@@ -170,7 +173,6 @@ export let MessageContextMenu = ({
       </ContextMenu.Root>
 
       <ReportDialog
-        // currentScreen="conversation"
         control={reportControl}
         subject={{
           view: 'message',
@@ -178,6 +180,9 @@ export let MessageContextMenu = ({
           message,
         }}
         onAfterSubmit={() => {
+          if (sender) {
+            unstableCacheProfileView(queryClient, sender)
+          }
           blockOrDeleteControl.open()
         }}
       />

src/components/moderation/ReportDialog/action.ts

@@ -102,7 +102,7 @@ export function useSubmitReportMutation() {
       }
 
       if (__DEV__) {
-        logger.info('Submitting report', {
+        logger.info('Submitting report (dry run)', {
           labeler: {
             handle: labeler.creator.handle,
           },

src/screens/Messages/components/RequestButtons.tsx

@@ -12,7 +12,10 @@ import {useEmail} from '#/state/email-verification'
 import {useAcceptConversation} from '#/state/queries/messages/accept-conversation'
 import {precacheConvoQuery} from '#/state/queries/messages/conversation'
 import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
-import {useProfileBlockMutationQueue} from '#/state/queries/profile'
+import {
+  unstableCacheProfileView,
+  useProfileBlockMutationQueue,
+} from '#/state/queries/profile'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
 import {
@@ -53,6 +56,8 @@ export function RejectMenu({
   const {_} = useLingui()
   const shadowedProfile = useProfileShadow(profile)
   const navigation = useNavigation<NavigationProp>()
+  const queryClient = useQueryClient()
+
   const {mutate: leaveConvo} = useLeaveConvo(convo.id, {
     onMutate: () => {
       if (currentScreen === 'conversation') {
@@ -174,6 +179,12 @@ export function RejectMenu({
             }}
             control={reportControl}
             onAfterSubmit={() => {
+              const sender = convo.members.find(
+                member => member.did === lastMessage.sender.did,
+              )
+              if (sender) {
+                unstableCacheProfileView(queryClient, sender)
+              }
               blockOrDeleteControl.open()
             }}
           />