From 9466bc544cf826dbc2f1bd53be558937282fa7f1 Mon Sep 17 00:00:00 2001 From: Athou Date: Tue, 8 Nov 2022 11:51:26 +0100 Subject: [PATCH] show placeholder when favicon is loading --- .../ImageWithPlaceholderWhileLoading.tsx | 9 +++++--- .../content/FeedEntryCompactHeader.tsx | 5 +++-- .../components/content/FeedEntryHeader.tsx | 5 +++-- .../src/components/content/FeedFavicon.tsx | 22 +++++++++++++++++++ .../src/components/sidebar/TreeNode.tsx | 9 +++----- .../src/components/sidebar/TreeSearch.tsx | 5 +++-- 6 files changed, 40 insertions(+), 15 deletions(-) create mode 100644 commafeed-client/src/components/content/FeedFavicon.tsx diff --git a/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx b/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx index 84fb9407..9a50e64f 100644 --- a/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx +++ b/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, - 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
- +
diff --git a/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx b/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx index 233bdc0f..0592268c 100644 --- a/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx +++ b/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 ( - feed icon + diff --git a/commafeed-client/src/components/content/FeedEntryHeader.tsx b/commafeed-client/src/components/content/FeedEntryHeader.tsx index f7725dc6..c4ef33d5 100644 --- a/commafeed-client/src/components/content/FeedEntryHeader.tsx +++ b/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) { - feed icon + {props.entry.feedName} diff --git a/commafeed-client/src/components/content/FeedFavicon.tsx b/commafeed-client/src/components/content/FeedFavicon.tsx new file mode 100644 index 00000000..ae5e4ca4 --- /dev/null +++ b/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 ( + + ) +} diff --git a/commafeed-client/src/components/sidebar/TreeNode.tsx b/commafeed-client/src/components/sidebar/TreeNode.tsx index d0c539f3..dc96f3e2 100644 --- a/commafeed-client/src/components/sidebar/TreeNode.tsx +++ b/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 ( props.onClick(e, props.id)}> props.onIconClick && props.onIconClick(e, props.id)}> - {typeof props.icon === "string" ? ( - favicon - ) : ( - props.icon - )} + {typeof props.icon === "string" ? : props.icon} {props.name} {!props.expanded && ( diff --git a/commafeed-client/src/components/sidebar/TreeSearch.tsx b/commafeed-client/src/components/sidebar/TreeSearch.tsx index 3cc5048e..b8c9d6ce 100644 --- a/commafeed-client/src/components/sidebar/TreeSearch.tsx +++ b/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: favicon, + icon: , onTrigger: () => dispatch(redirectToFeed(f.id)), }))