add support for declared icons in feeds (#2048)

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

@@ -1,3 +1,5 @@
+import { useTimeout } from "@mantine/hooks"
+import { useState } from "react"
 import { ImageWithPlaceholderWhileLoading } from "@/components/ImageWithPlaceholderWhileLoading"
 
 export interface FeedFaviconProps {
@@ -6,9 +8,16 @@ 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
+    const [timestamp, setTimestamp] = useState(0)
+    const { start: retry } = useTimeout(() => setTimestamp(Date.now()), 1000)
+
+    const urlWithTimestamp = url + (timestamp === 0 ? "" : `?t=${timestamp}`)
     return (
         <ImageWithPlaceholderWhileLoading
-            src={url}
+            src={urlWithTimestamp}
             alt="feed favicon"
             width={size}
             height={size}
@@ -16,6 +25,7 @@ export function FeedFavicon({ url, size = 18 }: Readonly<FeedFaviconProps>) {
             placeholderHeight={size}
             placeholderBackgroundColor="inherit"
             placeholderIconSize={size}
+            onError={retry}
         />
     )
 }