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 + + )} ) }