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

5
commafeed-client/src/components/content/FeedEntryCompactHeader.tsx
View File

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

5
commafeed-client/src/components/content/FeedEntryHeader.tsx
View File

@@ -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>

22
commafeed-client/src/components/content/FeedFavicon.tsx Normal file
View File

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