diff --git a/src/components/ReportDialog/index.tsx b/src/components/ReportDialog/index.tsx
index 1ab33c5a55..f222d49a3f 100644
--- a/src/components/ReportDialog/index.tsx
+++ b/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
- const error = preferencesError || modservicesError
+ React.useEffect(() => {
+ // on initial load, show a loading spinner for a hot sec to prevent flash
+ if (fakeLoading) setTimeout(() => setFakeLoading(false), 500)
+ }, [fakeLoading])
- return isLoading ? (
-
-
-
- ) : error || !(preferences && modservices) ? null : ( // TODO
+ return (
-
+ {fakeLoading ? (
+
+
+ {/* Here to capture focus for a hot sec to prevent flash */}
+
+
+ ) : error || !(preferences && modservices) ? null : ( // TODO
+
+ )}
)
}