Handle ReportDialog load better

src/components/ReportDialog/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {View, Linking} from 'react-native'
+import {View, Linking, Pressable} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {AppBskyModerationDefs, LabelGroupDefinition} from '@atproto/api'
@@ -486,25 +486,36 @@ function ReportDialogInner(props: ReportDialogProps) {
   } = useModServicesDetailedInfoQuery({
     dids: preferences ? preferences.moderationOpts.mods.map(m => m.did) : [],
   })
+  const isLoading = isPreferencesLoading || isModServicesLoading
+  const error = preferencesError || modservicesError
+
+  const [fakeLoading, setFakeLoading] = React.useState(isLoading)
+
   const labelGroupToLabelerMap = React.useMemo(() => {
     if (!modservices) return {}
     return getLabelGroupToLabelerMap(modservices)
   }, [modservices])
 
-  const isLoading = isPreferencesLoading || isModServicesLoading
+  React.useEffect(() => {
-  const error = preferencesError || modservicesError
+    // on initial load, show a loading spinner for a hot sec to prevent flash
+    if (fakeLoading) setTimeout(() => setFakeLoading(false), 500)
+  }, [fakeLoading])
 
-  return isLoading ? (
+  return (
-    <View style={[{height: 500}]}>
+    <Dialog.ScrollableInner label="Report Dialog">
-      <Loader />
+      {fakeLoading ? (
+        <View style={[a.align_center, {height: 100}]}>
+          <Loader size="xl" />
+          {/* Here to capture focus for a hot sec to prevent flash */}
+          <Pressable accessible={false} />
         </View>
       ) : error || !(preferences && modservices) ? null : ( // TODO
-    <Dialog.ScrollableInner label="Report Dialog">
         <ReportDialogLoaded
           {...props}
           labelers={modservices}
           labelGroupToLabelerMap={labelGroupToLabelerMap}
         />
+      )}
     </Dialog.ScrollableInner>
   )
 }