Only open block or delete dialog if submitted successfully

src/components/dms/ConvoMenu.tsx

@@ -123,7 +123,7 @@ let ConvoMenu = ({
               message: latestReportableMessage,
             }}
             control={reportControl}
-            onClose={() => {
+            onAfterSubmit={() => {
               blockOrDeleteControl.open()
             }}
           />

src/components/dms/MessageContextMenu.tsx

@@ -180,7 +180,7 @@ export let MessageContextMenu = ({
           convoId: convo.convo.id,
           message,
         }}
-        onClose={() => {
+        onAfterSubmit={() => {
           blockOrDeleteControl.open()
         }}
       />

src/components/moderation/ReportDialog/index.tsx

@@ -60,8 +60,7 @@ export function ReportDialog(
   )
   const onClose = React.useCallback(() => {
     logger.metric('reportDialog:close', {}, {statsig: false})
-    props.onClose?.()
+  }, [])
-  }, [props])
   return (
     <Dialog.Outer control={props.control} onClose={onClose}>
       <Dialog.Handle />
@@ -191,7 +190,9 @@ function Inner(props: ReportDialogProps) {
       )
       // give time for user feedback
       setTimeout(() => {
-        props.control.close()
+        props.control.close(() => {
+          props.onAfterSubmit?.()
+        })
       }, 1e3)
     } catch (e: any) {
       logger.metric('reportDialog:failure', {}, {statsig: false})

src/components/moderation/ReportDialog/types.ts

@@ -68,5 +68,8 @@ export type ParsedReportSubject =
 export type ReportDialogProps = {
   control: Dialog.DialogOuterProps['control']
   subject: ParsedReportSubject
-  onClose?: () => void
+  /**
+   * Called if the report was successfully submitted.
+   */
+  onAfterSubmit?: () => void
 }

src/screens/Messages/components/RequestButtons.tsx

@@ -172,7 +172,7 @@ export function RejectMenu({
               message: lastMessage,
             }}
             control={reportControl}
-            onClose={() => {
+            onAfterSubmit={() => {
               blockOrDeleteControl.open()
             }}
           />