Bit of ReportDialog cleanup

src/components/ReportDialog/index.tsx

@@ -1,84 +1,20 @@
 import React from 'react'
-import {View, Linking, Pressable} from 'react-native'
-import {AppBskyLabelerDefs} from '@atproto/api'
+import {View, Pressable} from 'react-native'
+import {Trans} from '@lingui/macro'
 
 import {useMyLabelers} from '#/state/queries/preferences'
 import {ReportOption} from '#/lib/moderation/useReportOptions'
-import {DMCA_LINK} from '#/components/ReportDialog/const'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
 import {atoms as a} from '#/alf'
 import {Loader} from '#/components/Loader'
 import * as Dialog from '#/components/Dialog'
+import {Text} from '#/components/Typography'
 
 import {ReportDialogProps} from './types'
 import {SelectReportOptionView} from './SelectReportOptionView'
 import {SubmitView} from './SubmitView'
-
-export function ReportDialogLoaded({
-  ...props
-}: ReportDialogProps & {
-  labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
-}) {
-  const control = Dialog.useDialogControl()
-  const [selectedReportOption, setSelectedReportOption] = React.useState<
-    ReportOption | undefined
-  >()
-
-  const onSelectReportOption = React.useCallback(
-    (reportOption: ReportOption) => {
-      if (reportOption.reason === 'copyright') {
-        Linking.openURL(DMCA_LINK)
-      } else {
-        setSelectedReportOption(reportOption)
-      }
-    },
-    [setSelectedReportOption],
-  )
-
-  return (
-    <>
-      {selectedReportOption ? (
-        <SubmitView
-          {...props}
-          selectedReportOption={selectedReportOption}
-          goBack={() => setSelectedReportOption(undefined)}
-          onSubmitComplete={control.close}
-        />
-      ) : (
-        <SelectReportOptionView
-          {...props}
-          onSelectReportOption={onSelectReportOption}
-        />
-      )}
-    </>
-  )
-}
-
-function ReportDialogInner(props: ReportDialogProps) {
-  const {isLoading, data: labelers, error} = useMyLabelers()
-
-  const [fakeLoading, setFakeLoading] = React.useState(isLoading)
-
-  React.useEffect(() => {
-    // on initial load, show a loading spinner for a hot sec to prevent flash
-    if (fakeLoading) setTimeout(() => setFakeLoading(false), 500)
-  }, [fakeLoading])
-
-  return (
-    <Dialog.ScrollableInner label="Report Dialog">
-      {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 || !labelers ? null : ( // TODO
-        <ReportDialogLoaded {...props} labelers={labelers} />
-      )}
-    </Dialog.ScrollableInner>
-  )
-}
+import {useDelayedLoading} from '#/components/hooks/useDelayedLoading'
 
 export function ReportDialog(props: ReportDialogProps) {
   return (
@@ -89,3 +25,45 @@ export function ReportDialog(props: ReportDialogProps) {
     </Dialog.Outer>
   )
 }
+
+function ReportDialogInner(props: ReportDialogProps) {
+  const {isLoading: isLabelerLoading, data: labelers, error} = useMyLabelers()
+  const isLoading = useDelayedLoading(500, isLabelerLoading)
+  const [selectedReportOption, setSelectedReportOption] = React.useState<
+    ReportOption | undefined
+  >()
+
+  return (
+    <Dialog.ScrollableInner label="Report Dialog">
+      {isLoading ? (
+        <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 || !labelers ? (
+        <View>
+          <Text style={[a.text_md]}>
+            <Trans>Something went wrong, please try again.</Trans>
+          </Text>
+        </View>
+      ) : selectedReportOption ? (
+        <SubmitView
+          {...props}
+          labelers={labelers}
+          selectedReportOption={selectedReportOption}
+          goBack={() => setSelectedReportOption(undefined)}
+          onSubmitComplete={() => props.control.close()}
+        />
+      ) : (
+        <SelectReportOptionView
+          {...props}
+          labelers={labelers}
+          onSelectReportOption={setSelectedReportOption}
+        />
+      )}
+
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
+  )
+}

src/components/hooks/useDelayedLoading.ts

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export function useDelayedLoading(delay: number, initialState: boolean = true) {
+  const [isLoading, setIsLoading] = React.useState(initialState)
+
+  React.useEffect(() => {
+    let timeout: NodeJS.Timeout
+    // on initial load, show a loading spinner for a hot sec to prevent flash
+    if (isLoading) timeout = setTimeout(() => setIsLoading(false), delay)
+
+    return () => timeout && clearTimeout(timeout)
+  }, [isLoading, delay])
+
+  return isLoading
+}