fix: SquareImage not showing

Author: lawvs

apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx

@@ -8,6 +8,7 @@ import { tracker } from "@follow/tracker"
 import { cn, formatEstimatedMins, formatTimeToSeconds } from "@follow/utils"
 import { useVideoPlayer, VideoView } from "expo-video"
 import { memo, useCallback, useMemo, useRef, useState } from "react"
+import type { ImageErrorEventData } from "react-native"
 import { StyleSheet, Text, View } from "react-native"
 
 import { useActionLanguage } from "@/src/atoms/settings/general"
@@ -223,19 +224,25 @@ const ThumbnailImage = ({
     })
   }, [audio, entry?.title, feed?.title, image, isLoading, isPlaying, video, videoPlayer])
 
+  const [imageError, setImageError] = useState(audio && !image)
+  const handleImageError = useCallback(() => {
+    setImageError(true)
+  }, [])
+
   if (!image && !audio && !video) return null
   const isSquare = thumbnailRatio === "square"
   return (
     <View className={cn("relative ml-4 h-24 overflow-hidden rounded-lg", isSquare ? "h-24" : "")}>
       {image &&
         (thumbnailRatio === "square" ? (
-          <SquareImage image={image} blurhash={blurhash} />
+          <SquareImage image={image} blurhash={blurhash} onError={handleImageError} />
         ) : (
           <AspectRatioImage
             blurhash={blurhash}
             image={image}
             height={mediaModel?.height}
             width={mediaModel?.width}
+            onError={handleImageError}
           />
         ))}
 
@@ -260,7 +267,7 @@ const ThumbnailImage = ({
       )}
 
       {/* Show feed icon if no image but audio is present */}
-      {audio && !image && <FeedIcon feed={feed} size={96} />}
+      {imageError && <FeedIcon feed={feed} size={96} />}
 
       {(video || audio) && (
         <NativePressable
@@ -292,16 +299,16 @@ const AspectRatioImage = ({
   blurhash,
   height = 96,
   width = 96,
+  onError,
 }: {
   image: string
   blurhash?: string
   height?: number
   width?: number
+  onError?: (event: ImageErrorEventData) => void
 }) => {
-  const [isLoading, setIsLoading] = useState(true)
-
   if (height === width || !height || !width) {
-    return <SquareImage image={image} blurhash={blurhash} />
+    return <SquareImage image={image} blurhash={blurhash} onError={onError} />
   }
   // Calculate aspect ratio and determine dimensions
   // Ensure the larger dimension is capped at 96px while maintaining aspect ratio
@@ -320,22 +327,7 @@ const AspectRatioImage = ({
   }
 
   return (
-    <View
-      style={{
-        width: scaledWidth,
-        height: scaledHeight,
-      }}
-      className="ml-auto overflow-hidden rounded-lg"
-    >
-      {isLoading && (
-        <View
-          style={{
-            width: scaledWidth,
-            height: scaledHeight,
-          }}
-          className="bg-system-fill absolute animate-pulse rounded-lg"
-        />
-      )}
+    <View className="ml-auto flex h-full justify-center overflow-hidden rounded-lg">
       <Image
         proxy={{
           width: 96,
@@ -351,31 +343,38 @@ const AspectRatioImage = ({
         blurhash={blurhash}
         contentFit="cover"
         hideOnError
-        onLoad={() => setIsLoading(false)}
+        onError={onError}
       />
     </View>
   )
 }
 
-const SquareImage = ({ image, blurhash }: { image: string; blurhash?: string }) => {
-  const [isLoading, setIsLoading] = useState(true)
+const SquareImage = ({
+  image,
+  blurhash,
+  onError,
+}: {
+  image: string
+  blurhash?: string
+  onError?: (event: ImageErrorEventData) => void
+}) => {
   return (
     <View className="size-24 overflow-hidden rounded-lg">
-      {isLoading && <View className="bg-system-fill absolute inset-0 animate-pulse rounded-lg" />}
       <Image
         proxy={{
           width: 96,
           height: 96,
         }}
+        style={{
+          width: 96,
+          height: 96,
+        }}
         transition={100}
         source={{
           uri: image,
         }}
         blurhash={blurhash}
-        className="size-24 overflow-hidden rounded-lg"
-        contentFit="cover"
-        hideOnError
-        onLoad={() => setIsLoading(false)}
+        onError={onError}
       />
     </View>
   )