From 0c3ae4418185059d17e30a5b5af283b54ece9b0d Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 27 Jun 2025 13:27:02 +0300
Subject: [PATCH] add handling for feeds that fail to load

---
 src/components/Divider.tsx               |  11 +-
 src/view/com/feeds/FeedSourceCard.tsx    | 202 ++++++++++++++++++++++-
 src/view/com/util/LoadingPlaceholder.tsx |   2 +-
 3 files changed, 200 insertions(+), 15 deletions(-)

diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
index e4891aacb1..ec7a7356ad 100644
--- a/src/components/Divider.tsx
+++ b/src/components/Divider.tsx
@@ -1,18 +1,11 @@
 import {View} from 'react-native'
 
-import {atoms as a, flatten, useTheme, ViewStyleProp} from '#/alf'
+import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
 
 export function Divider({style}: ViewStyleProp) {
   const t = useTheme()
 
   return (
-    <View
-      style={[
-        a.w_full,
-        a.border_t,
-        t.atoms.border_contrast_low,
-        flatten(style),
-      ]}
-    />
+    <View style={[a.w_full, a.border_t, t.atoms.border_contrast_low, style]} />
   )
 }
diff --git a/src/view/com/feeds/FeedSourceCard.tsx b/src/view/com/feeds/FeedSourceCard.tsx
index 4b2db8cf63..26778ce088 100644
--- a/src/view/com/feeds/FeedSourceCard.tsx
+++ b/src/view/com/feeds/FeedSourceCard.tsx
@@ -9,16 +9,24 @@ import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {sanitizeHandle} from '#/lib/strings/handles'
+import {isNative, isWeb} from '#/platform/detection'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {
   type FeedSourceInfo,
   hydrateFeedGenerator,
   hydrateList,
   useFeedSourceInfoQuery,
 } from '#/state/queries/feed'
+import {useProfileQuery} from '#/state/queries/profile'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {Divider} from '#/components/Divider'
+import {Warning_Stroke2_Corner0_Rounded} from '#/components/icons/Warning'
 import {Link} from '#/components/Link'
+import * as ProfileCard from '#/components/ProfileCard'
 import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
 
@@ -49,7 +57,7 @@ export function FeedSourceCard({
     } else {
       feed = hydrateList(feedData)
     }
-    return <FeedSourceCardLoaded feed={feed} {...props} />
+    return <FeedSourceCardLoaded feedUri={feedUri} feed={feed} {...props} />
   } else {
     return <FeedSourceCardWithoutData feedUri={feedUri} {...props} />
   }
@@ -59,14 +67,22 @@ export function FeedSourceCardWithoutData({
   feedUri,
   ...props
 }: Omit<FeedSourceCardProps, 'feedData'>) {
-  const {data: feed} = useFeedSourceInfoQuery({
+  const {data: feed, error} = useFeedSourceInfoQuery({
     uri: feedUri,
   })
 
-  return <FeedSourceCardLoaded feed={feed} {...props} />
+  return (
+    <FeedSourceCardLoaded
+      feedUri={feedUri}
+      feed={feed}
+      error={error}
+      {...props}
+    />
+  )
 }
 
 export function FeedSourceCardLoaded({
+  feedUri,
   feed,
   style,
   showDescription = false,
@@ -74,7 +90,9 @@ export function FeedSourceCardLoaded({
   showMinimalPlaceholder,
   hideTopBorder,
   link = true,
+  error,
 }: {
+  feedUri: string
   feed?: FeedSourceInfo
   style?: StyleProp<ViewStyle>
   showDescription?: boolean
@@ -82,6 +100,7 @@ export function FeedSourceCardLoaded({
   showMinimalPlaceholder?: boolean
   hideTopBorder?: boolean
   link?: boolean
+  error?: unknown
 }) {
   const t = useTheme()
   const {_} = useLingui()
@@ -92,7 +111,18 @@ export function FeedSourceCardLoaded({
    * This state also captures the scenario where a feed can't load for whatever
    * reason.
    */
-  if (!feed)
+  if (!feed) {
+    if (error) {
+      return (
+        <MissingFeed
+          uri={feedUri}
+          style={style}
+          hideTopBorder={hideTopBorder}
+          error={error}
+        />
+      )
+    }
+
     return (
       <FeedLoadingPlaceholder
         style={[
@@ -105,6 +135,7 @@ export function FeedSourceCardLoaded({
         showLowerPlaceholder={!showMinimalPlaceholder}
       />
     )
+  }
 
   const inner = (
     <>
@@ -194,3 +225,164 @@ export function FeedSourceCardLoaded({
     )
   }
 }
+
+function MissingFeed({
+  style,
+  hideTopBorder,
+  uri,
+  error,
+}: {
+  style?: StyleProp<ViewStyle>
+  hideTopBorder?: boolean
+  uri: string
+  error?: unknown
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const atUri = new AtUri(uri)
+  const {data: profile, isError: isProfileError} = useProfileQuery({
+    did: atUri.host,
+  })
+  const moderationOpts = useModerationOpts()
+  const control = Dialog.useDialogControl()
+
+  return (
+    <>
+      <Button
+        label={_(msg`Could not connect to custom feed`)}
+        accessibilityHint={_(msg`Tap for more information`)}
+        onPress={control.open}
+        style={[
+          a.flex_1,
+          a.p_lg,
+          a.gap_md,
+          !hideTopBorder && !a.border_t,
+          t.atoms.border_contrast_low,
+          a.justify_start,
+          style,
+        ]}>
+        <View style={[a.flex_row, a.align_center]}>
+          <View
+            style={[
+              {width: 36, height: 36},
+              t.atoms.bg_contrast_25,
+              a.rounded_sm,
+              a.mr_md,
+              a.align_center,
+              a.justify_center,
+            ]}>
+            <Warning_Stroke2_Corner0_Rounded size="lg" />
+          </View>
+          <View style={[a.flex_1]}>
+            <Text
+              emoji
+              style={[a.text_sm, a.font_bold, a.leading_snug, a.italic]}
+              numberOfLines={1}>
+              <Trans>Feed unavailable</Trans>
+            </Text>
+            <Text
+              style={[
+                a.text_sm,
+                t.atoms.text_contrast_medium,
+                a.leading_snug,
+                a.italic,
+              ]}
+              numberOfLines={1}>
+              {isWeb ? (
+                <Trans>Click for information</Trans>
+              ) : (
+                <Trans>Tap for information</Trans>
+              )}
+            </Text>
+          </View>
+        </View>
+      </Button>
+
+      <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
+        <Dialog.Handle />
+
+        <Dialog.ScrollableInner
+          label={_(msg`Unavailable feed information`)}
+          style={web({maxWidth: 500})}>
+          <View style={[a.gap_sm]}>
+            <Text style={[a.font_heavy, a.text_2xl]}>
+              <Trans>Could not connect to feed service</Trans>
+            </Text>
+            <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
+              <Trans>
+                We could not connect to the service that provides this custom
+                feed. It may be temporarily unavailable and experiencing issues,
+                or permanently unavailable.
+              </Trans>
+            </Text>
+            <Divider style={[a.my_md]} />
+            <Text style={[a.font_bold, t.atoms.text_contrast_high]}>
+              <Trans>Feed creator</Trans>
+            </Text>
+            {profile && moderationOpts && (
+              <View style={[a.w_full, a.align_start]}>
+                <ProfileCard.Link
+                  profile={profile}
+                  onPress={() => control.close()}>
+                  <ProfileCard.Header>
+                    <ProfileCard.Avatar
+                      profile={profile}
+                      moderationOpts={moderationOpts}
+                      disabledPreview
+                    />
+                    <ProfileCard.NameAndHandle
+                      profile={profile}
+                      moderationOpts={moderationOpts}
+                    />
+                  </ProfileCard.Header>
+                </ProfileCard.Link>
+              </View>
+            )}
+            {isProfileError && (
+              <Text
+                style={[
+                  t.atoms.text_contrast_high,
+                  a.italic,
+                  a.text_center,
+                  a.w_full,
+                ]}>
+                <Trans>Could not find profile</Trans>
+              </Text>
+            )}
+            <Text style={[a.font_bold, t.atoms.text_contrast_high, a.mt_md]}>
+              <Trans>Feed identifier</Trans>
+            </Text>
+            <Text style={[a.text_md, t.atoms.text_contrast_high, a.italic]}>
+              {atUri.rkey}
+            </Text>
+            {error instanceof Error && (
+              <>
+                <Text
+                  style={[a.font_bold, t.atoms.text_contrast_high, a.mt_md]}>
+                  <Trans>Error message</Trans>
+                </Text>
+                <Text style={[a.text_md, t.atoms.text_contrast_high, a.italic]}>
+                  {error.message}
+                </Text>
+              </>
+            )}
+          </View>
+          {isNative && (
+            <Button
+              label={_(msg`Close`)}
+              onPress={() => control.close()}
+              size="small"
+              variant="solid"
+              color="secondary"
+              style={[a.mt_5xl]}>
+              <ButtonText>
+                <Trans>Close</Trans>
+              </ButtonText>
+            </Button>
+          )}
+          <Dialog.Close />
+        </Dialog.ScrollableInner>
+      </Dialog.Outer>
+    </>
+  )
+}
diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx
index 486f353f01..1b454598b8 100644
--- a/src/view/com/util/LoadingPlaceholder.tsx
+++ b/src/view/com/util/LoadingPlaceholder.tsx
@@ -243,7 +243,7 @@ export function FeedLoadingPlaceholder({
         <LoadingPlaceholder
           width={36}
           height={36}
-          style={[styles.avatar, {borderRadius: 6}]}
+          style={[styles.avatar, {borderRadius: 8}]}
         />
         <View style={[s.flex1]}>
           <LoadingPlaceholder width={100} height={8} style={[s.mt5, s.mb10]} />