show placeholder when favicon is loading

commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx

@@ -10,6 +10,9 @@ interface ImageWithPlaceholderWhileLoadingProps {
     height?: number | "auto"
     placeholderWidth?: number
     placeholderHeight?: number
+    placeholderBackgroundColor?: string
+    placeholderIconSize?: number
+    placeholderIconColor?: string
 }
 
 const useStyles = createStyles((theme, props: ImageWithPlaceholderWhileLoadingProps) => ({
@@ -17,8 +20,8 @@ const useStyles = createStyles((theme, props: ImageWithPlaceholderWhileLoadingPr
         width: props.placeholderWidth ?? 400,
         height: props.placeholderHeight ?? 600,
         maxWidth: "100%",
-        color: theme.fn.variant({ color: theme.primaryColor, variant: "subtle" }).color,
+        color: props.placeholderIconColor ?? theme.fn.variant({ color: theme.primaryColor, variant: "subtle" }).color,
-        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1],
+        backgroundColor: props.placeholderBackgroundColor ?? (theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]),
     },
 }))
 
@@ -32,7 +35,7 @@ export function ImageWithPlaceholderWhileLoading(props: ImageWithPlaceholderWhil
                 <Box>
                     <Center className={classes.placeholder}>
                         <div>
-                            <TbPhoto size={48} />
+                            <TbPhoto size={props.placeholderIconSize ?? 48} />
                         </div>
                     </Center>
                 </Box>

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

@@ -1,8 +1,9 @@
-import { Box, createStyles, Image, Text } from "@mantine/core"
+import { Box, createStyles, Text } from "@mantine/core"
 import { Entry } from "app/types"
 import { RelativeDate } from "components/RelativeDate"
 import { OnDesktop } from "components/responsive/OnDesktop"
 import { FeedEntryTitle } from "./FeedEntryTitle"
+import { FeedFavicon } from "./FeedFavicon"
 
 export interface FeedEntryHeaderProps {
     entry: Entry
@@ -37,7 +38,7 @@ export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) {
     return (
         <Box className={classes.wrapper}>
             <Box>
-                <Image withPlaceholder src={props.entry.iconUrl} alt="feed icon" width={18} height={18} />
+                <FeedFavicon url={props.entry.iconUrl} />
             </Box>
             <OnDesktop>
                 <Text color="dimmed" className={classes.feedName}>

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

@@ -1,7 +1,8 @@
-import { Box, createStyles, Image, Text } from "@mantine/core"
+import { Box, createStyles, Text } from "@mantine/core"
 import { Entry } from "app/types"
 import { RelativeDate } from "components/RelativeDate"
 import { FeedEntryTitle } from "./FeedEntryTitle"
+import { FeedFavicon } from "./FeedFavicon"
 
 export interface FeedEntryHeaderProps {
     entry: Entry
@@ -33,7 +34,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
             </Box>
             <Box className={classes.headerSubtext}>
                 <Box mr={6}>
-                    <Image withPlaceholder src={props.entry.iconUrl} alt="feed icon" width={18} height={18} />
+                    <FeedFavicon url={props.entry.iconUrl} />
                 </Box>
                 <Box>
                     <Text color="dimmed">{props.entry.feedName}</Text>

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

@@ -0,0 +1,22 @@
+import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
+
+export interface FeedFaviconProps {
+    url: string
+    size?: number
+}
+
+export function FeedFavicon({ url, size = 18 }: FeedFaviconProps) {
+    return (
+        <ImageWithPlaceholderWhileLoading
+            src={url}
+            alt="feed favicon"
+            width={size}
+            height={size}
+            placeholderWidth={size}
+            placeholderHeight={size}
+            placeholderBackgroundColor="inherit"
+            placeholderIconSize={size}
+            placeholderIconColor="inherit"
+        />
+    )
+}

commafeed-client/src/components/sidebar/TreeNode.tsx

@@ -1,4 +1,5 @@
-import { Box, createStyles, Image } from "@mantine/core"
+import { Box, createStyles } from "@mantine/core"
+import { FeedFavicon } from "components/content/FeedFavicon"
 import React, { ReactNode } from "react"
 import { UnreadCount } from "./UnreadCount"
 
@@ -49,11 +50,7 @@ export function TreeNode(props: TreeNodeProps) {
     return (
         <Box py={1} pl={props.level * 20} className={classes.node} onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}>
             <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick && props.onIconClick(e, props.id)}>
-                {typeof props.icon === "string" ? (
+                {typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}
-                    <Image withPlaceholder src={props.icon} alt="favicon" width={18} height={18} />
-                ) : (
-                    props.icon
-                )}
             </Box>
             <Box className={classes.nodeText}>{props.name}</Box>
             {!props.expanded && (

commafeed-client/src/components/sidebar/TreeSearch.tsx

@@ -1,9 +1,10 @@
 import { t } from "@lingui/macro"
-import { Box, Center, Image, Kbd, TextInput } from "@mantine/core"
+import { Box, Center, Kbd, TextInput } from "@mantine/core"
 import { openSpotlight, SpotlightAction, SpotlightProvider } from "@mantine/spotlight"
 import { redirectToFeed } from "app/slices/redirect"
 import { useAppDispatch } from "app/store"
 import { Subscription } from "app/types"
+import { FeedFavicon } from "components/content/FeedFavicon"
 import { useMousetrap } from "hooks/useMousetrap"
 import { TbSearch } from "react-icons/tb"
 
@@ -17,7 +18,7 @@ export function TreeSearch(props: TreeSearchProps) {
         .sort((f1, f2) => f1.name.localeCompare(f2.name))
         .map(f => ({
             title: f.name,
-            icon: <Image withPlaceholder src={f.iconUrl} alt="favicon" width={18} height={18} />,
+            icon: <FeedFavicon url={f.iconUrl} />,
             onTrigger: () => dispatch(redirectToFeed(f.id)),
         }))