Archives/Athou_commafeed
1
0
Fork 1
mirror of https://github.com/Athou/commafeed.git synced 2026-03-21 21:37:29 +00:00
Code Issues Packages Projects Releases Wiki 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/ImageWithPlaceholderWhileLoading.tsx
View File

@@ -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,
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1],
color: props.placeholderIconColor ?? theme.fn.variant({ color: theme.primaryColor, variant: "subtle" }).color,
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>