garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

show placeholder when favicon is loading

Browse Source
This commit is contained in:
Athou
2022-11-08 11:51:26 +01:00
parent 9e65f5726c
commit 9466bc544c
6 changed files with 40 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
commafeed-client/src/components/sidebar/TreeNode.tsx
View File

@@ -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" ? (
<Image withPlaceholder src={props.icon} alt="favicon" width={18} height={18} />
) : (
props.icon
)}
{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}
</Box>
<Box className={classes.nodeText}>{props.name}</Box>
{!props.expanded && (

5
commafeed-client/src/components/sidebar/TreeSearch.tsx
View File

@@ -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)),
}))