fix: handle image loading errors in FeedIcon component

Author: lawvs

apps/mobile/src/components/ui/icon/feed-icon.tsx

@@ -1,12 +1,13 @@
 import type { FeedViewType } from "@follow/constants"
 import type { ReactNode } from "react"
-import { useMemo } from "react"
+import { useCallback, useMemo, useState } from "react"
 
 import type { FeedSchema } from "@/src/database/schemas/types"
 import { getFeedIconSource } from "@/src/lib/image"
 
 import type { ImageProps } from "../image/Image"
 import { Image } from "../image/Image"
+import { FallbackIcon } from "./fallback-icon"
 
 export type FeedIconRequiredFeed = Pick<
   FeedSchema,
@@ -39,12 +40,15 @@ export function FeedIcon({
   siteUrl,
   ...props
 }: FeedIconProps & ImageProps) {
+  const [isError, setIsError] = useState(false)
   const src = useMemo(() => {
     return getFeedIconSource(feed, siteUrl, fallback)
   }, [fallback, feed, siteUrl])
 
-  if (!src) {
-    return null
+  const handleError = useCallback(() => setIsError(true), [])
+
+  if (!src || isError) {
+    return <FallbackIcon title={feed?.title ?? ""} size={size} />
   }
   return (
     <Image
@@ -55,6 +59,7 @@ export function FeedIcon({
       className="rounded"
       style={{ height: size, width: size }}
       source={{ uri: src }}
+      onError={handleError}
       {...props}
     />
   )