diff --git a/components/LinkViews/LinkComponents/LinkIcon.tsx b/components/LinkViews/LinkComponents/LinkIcon.tsx index c423aa7..327e7af 100644 --- a/components/LinkViews/LinkComponents/LinkIcon.tsx +++ b/components/LinkViews/LinkComponents/LinkIcon.tsx @@ -1,7 +1,7 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; import Image from "next/image"; import isValidUrl from "@/lib/shared/isValidUrl"; -import React from "react"; +import React, { useState } from "react"; import Icon from "@/components/Icon"; import { IconWeight } from "@phosphor-icons/react"; import clsx from "clsx"; @@ -26,7 +26,7 @@ export default function LinkIcon({ const url = isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined; - const [showFavicon, setShowFavicon] = React.useState(true); + const [faviconLoaded, setFaviconLoaded] = useState(false); return (
onClick && onClick()}> @@ -41,21 +41,27 @@ export default function LinkIcon({ />
) : link.type === "url" && url ? ( - showFavicon ? ( + <> { - setShowFavicon(false); - }} + onLoadingComplete={() => setFaviconLoaded(true)} + onError={() => setFaviconLoaded(false)} /> - ) : ( - - ) + {!faviconLoaded && ( + + )} + ) : link.type === "pdf" ? (