limit the number of favicon retries

commafeed-client/src/components/content/FeedFavicon.tsx

@@ -10,11 +10,18 @@ export interface FeedFaviconProps {
 export function FeedFavicon({ url, size = 18 }: Readonly<FeedFaviconProps>) {
     // the backend always returns a favicon except when the feed has never been fetched
     // this can happen when the user subscribes to a feed, the feed is added to the tree but the feed has not been fetched yet
-    // in this case we just retry every second until the feed is fetched and the favicon is available
+    // in this case we retry every second up to 3 times until the feed is fetched and the favicon is available
     const [timestamp, setTimestamp] = useState(0)
+    const [retryCount, setRetryCount] = useState(0)
     const { start: retry } = useTimeout(() => setTimestamp(Date.now()), 1000)
 
     const urlWithTimestamp = url + (timestamp === 0 ? "" : `?t=${timestamp}`)
+    const handleError = () => {
+        if (retryCount < 3) {
+            setRetryCount(c => c + 1)
+            retry()
+        }
+    }
     return (
         <ImageWithPlaceholderWhileLoading
             src={urlWithTimestamp}
@@ -25,7 +32,7 @@ export function FeedFavicon({ url, size = 18 }: Readonly<FeedFaviconProps>) {
             placeholderHeight={size}
             placeholderBackgroundColor="inherit"
             placeholderIconSize={size}
-            onError={retry}
+            onError={handleError}
         />
     )
 }