Add retry button and relayout to accommodate

src/ageAssurance/data.tsx

@@ -136,6 +136,15 @@ export async function prefetchConfig() {
     }
   })
 }
+export async function refetchConfig() {
+  logger.debug(`refetchConfig: fetching...`)
+  const res = await getConfig()
+  qc.setQueryData<AppBskyAgeassuranceGetConfig.OutputSchema>(
+    configQueryKey,
+    res,
+  )
+  return res
+}
 export function useConfigQuery() {
   return useQuery(
     {
@@ -146,6 +155,10 @@ export function useConfigQuery() {
        * @see https://tanstack.com/query/latest/docs/framework/react/guides/initial-query-data#initial-data-from-the-cache-with-initialdataupdatedat
        */
       staleTime: IS_DEV ? 5e3 : 1000 * 60 * 60,
+      /**
+       * N.B. if prefetch failed above, we'll have no `initialData`, and this
+       * query will run on startup.
+       */
       initialData: getConfigFromCache(),
       initialDataUpdatedAt: () =>
         qc.getQueryState(configQueryKey)?.dataUpdatedAt,

src/ageAssurance/state.ts

@@ -30,12 +30,19 @@ export function useAgeAssuranceState(): AgeAssuranceState {
         access: AgeAssuranceAccess.Safe,
       }
 
-    // should never happen, but need to guard
+    /**
+     * This can happen if the prefetch fails (such as due to network issues).
+     * The query handler will try it again, but if it continues to fail, of
+     * course we won't have config.
+     *
+     * In this case, fail open to avoid blocking users.
+     */
     if (!config) {
       logger.warn('useAgeAssuranceState: missing config')
       return {
         status: AgeAssuranceStatus.Unknown,
-        access: AgeAssuranceAccess.Unknown,
+        access: AgeAssuranceAccess.Safe,
+        error: 'config',
       }
     }
 

src/ageAssurance/types.ts

@@ -18,6 +18,7 @@ export type AgeAssuranceState = {
   lastInitiatedAt?: string
   status: AgeAssuranceStatus
   access: AgeAssuranceAccess
+  error?: 'config' // maybe other specific cases in the future
 }
 
 export function parseStatusFromString(raw: string) {

src/components/ageAssurance/AgeAssuranceAccountCard.tsx

@@ -8,6 +8,7 @@ import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {AgeAssuranceAppealDialog} from '#/components/ageAssurance/AgeAssuranceAppealDialog'
 import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
+import {AgeAssuranceConfigUnavailableError} from '#/components/ageAssurance/AgeAssuranceErrors'
 import {
   AgeAssuranceInitDialog,
   useDialogControl,
@@ -27,6 +28,13 @@ import {useDeviceGeolocationApi} from '#/geolocation'
 export function AgeAssuranceAccountCard({style}: ViewStyleProp & {}) {
   const aa = useAgeAssurance()
   if (aa.state.access === aa.Access.Full) return null
+  if (aa.state.error === 'config') {
+    return (
+      <View style={style}>
+        <AgeAssuranceConfigUnavailableError />
+      </View>
+    )
+  }
   return <Inner style={style} />
 }
 

src/components/ageAssurance/AgeAssuranceAdmonition.tsx

@@ -3,6 +3,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {atoms as a, select, useTheme, type ViewStyleProp} from '#/alf'
+import {AgeAssuranceConfigUnavailableError} from '#/components/ageAssurance/AgeAssuranceErrors'
 import {useDialogControl} from '#/components/ageAssurance/AgeAssuranceInitDialog'
 import type * as Dialog from '#/components/Dialog'
 import {ShieldCheck_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
@@ -19,6 +20,9 @@ export function AgeAssuranceAdmonition({
   const aa = useAgeAssurance()
 
   if (aa.state.access === aa.Access.Full) return null
+  if (aa.state.error === 'config') {
+    return <AgeAssuranceConfigUnavailableError style={style} />
+  }
 
   return (
     <Inner style={style} control={control}>

src/components/ageAssurance/AgeAssuranceDismissibleFeedBanner.tsx

@@ -23,6 +23,7 @@ export function useInternalState() {
   const visible = useMemo(() => {
     if (aa.state.access === aa.Access.Full) return false
     if (aa.state.lastInitiatedAt) return false
+    if (aa.state.error === 'config') return false
     if (hidden) return false
     if (nux && nux.completed) return false
     return true

src/components/ageAssurance/AgeAssuranceDismissibleNotice.tsx

@@ -5,6 +5,7 @@ import {useLingui} from '@lingui/react'
 import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs'
 import {atoms as a, type ViewStyleProp} from '#/alf'
 import {AgeAssuranceAdmonition} from '#/components/ageAssurance/AgeAssuranceAdmonition'
+import {AgeAssuranceConfigUnavailableError} from '#/components/ageAssurance/AgeAssuranceErrors'
 import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {Button, ButtonIcon} from '#/components/Button'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
@@ -26,33 +27,37 @@ export function AgeAssuranceDismissibleNotice({style}: ViewStyleProp & {}) {
 
   return (
     <View style={style}>
-      <View>
-        <AgeAssuranceAdmonition>{copy.notice}</AgeAssuranceAdmonition>
+      {aa.state.error === 'config' ? (
+        <AgeAssuranceConfigUnavailableError />
+      ) : (
+        <View>
+          <AgeAssuranceAdmonition>{copy.notice}</AgeAssuranceAdmonition>
 
-        <Button
-          label={_(msg`Don't show again`)}
-          size="tiny"
-          variant="solid"
-          color="secondary_inverted"
-          shape="round"
-          onPress={() => {
-            save({
-              id: Nux.AgeAssuranceDismissibleNotice,
-              completed: true,
-              data: undefined,
-            })
-            logger.metric('ageAssurance:dismissSettingsNotice', {})
-          }}
-          style={[
-            a.absolute,
-            {
-              top: 12,
-              right: 12,
-            },
-          ]}>
-          <ButtonIcon icon={X} />
-        </Button>
-      </View>
+          <Button
+            label={_(msg`Don't show again`)}
+            size="tiny"
+            variant="solid"
+            color="secondary_inverted"
+            shape="round"
+            onPress={() => {
+              save({
+                id: Nux.AgeAssuranceDismissibleNotice,
+                completed: true,
+                data: undefined,
+              })
+              logger.metric('ageAssurance:dismissSettingsNotice', {})
+            }}
+            style={[
+              a.absolute,
+              {
+                top: 12,
+                right: 12,
+              },
+            ]}>
+            <ButtonIcon icon={X} />
+          </Button>
+        </View>
+      )}
     </View>
   )
 }

src/components/ageAssurance/AgeAssuranceErrors.tsx

@@ -0,0 +1,37 @@
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {type ViewStyleProp} from '#/alf'
+import * as Admonition from '#/components/Admonition'
+import {ButtonIcon, ButtonText} from '#/components/Button'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as RetryIcon} from '#/components/icons/ArrowRotate'
+import {refetchConfig} from '#/ageAssurance/data'
+
+export function AgeAssuranceConfigUnavailableError(props: ViewStyleProp) {
+  const {_} = useLingui()
+  return (
+    <Admonition.Outer type="error" style={props.style}>
+      <Admonition.Row>
+        <Admonition.Icon />
+        <Admonition.Content>
+          <Admonition.Text>
+            <Trans>
+              We were unable to load the age assurance configuration for your
+              region, probably due to a network error. Some content and features
+              may be unavailable temporarily. Please try again later.
+            </Trans>
+          </Admonition.Text>
+        </Admonition.Content>
+        <Admonition.Button
+          color="negative_subtle"
+          label={_(msg`Retry`)}
+          onPress={() => refetchConfig().catch(() => {})}>
+          <ButtonText>
+            <Trans>Retry</Trans>
+          </ButtonText>
+          <ButtonIcon icon={RetryIcon} />
+        </Admonition.Button>
+      </Admonition.Row>
+    </Admonition.Outer>
+  )
+}

src/components/ageAssurance/AgeRestrictedScreen.tsx

@@ -5,6 +5,7 @@ import {useLingui} from '@lingui/react'
 import {atoms as a} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
+import {AgeAssuranceConfigUnavailableError} from '#/components/ageAssurance/AgeAssuranceErrors'
 import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
 import {ButtonIcon, ButtonText} from '#/components/Button'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
@@ -44,6 +45,12 @@ export function AgeRestrictedScreen({
       </Layout.Header.Outer>
       <Layout.Content>
         <View style={[a.p_lg]}>
+          {aa.state.error === 'config' && (
+            <View style={[a.pb_lg]}>
+              <AgeAssuranceConfigUnavailableError />
+            </View>
+          )}
+
           <View style={[a.align_start, a.pb_lg]}>
             <AgeAssuranceBadge />
           </View>