add support for declared icons in feeds (#2048)

commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx

@@ -14,6 +14,7 @@ interface ImageWithPlaceholderWhileLoadingProps {
     placeholderHeight?: number
     placeholderBackgroundColor?: string
     placeholderIconSize?: number
+    onError?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void
 }
 
 const useStyles = tss
@@ -44,6 +45,7 @@ export function ImageWithPlaceholderWhileLoading({
     title,
     width,
     style,
+    onError,
 }: Readonly<ImageWithPlaceholderWhileLoadingProps>) {
     const { classes } = useStyles({
         placeholderWidth,
@@ -70,6 +72,7 @@ export function ImageWithPlaceholderWhileLoading({
                 width={width}
                 height={height}
                 onLoad={() => setLoading(false)}
+                onError={onError}
                 style={{
                     ...style,
                     display: loading ? "none" : (style?.display ?? "initial"),

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}
         />
     )
 }