From 7931e2d7b6f1d54949e1e0ec0e9107551a0bd166 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Thu, 7 Nov 2024 00:19:12 -0500
Subject: [PATCH] better logic when showing link icons

---
 .../LinkViews/LinkComponents/LinkIcon.tsx     | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

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<boolean>(true);
+  const [faviconLoaded, setFaviconLoaded] = useState(false);
 
   return (
     <div onClick={() => onClick && onClick()}>
@@ -41,21 +41,27 @@ export default function LinkIcon({
           />
         </div>
       ) : link.type === "url" && url ? (
-        showFavicon ? (
+        <>
           <Image
             src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
             width={64}
             height={64}
             alt=""
-            className={iconClasses}
+            className={clsx(
+              iconClasses,
+              faviconLoaded ? "" : "absolute opacity-0"
+            )}
             draggable="false"
-            onError={() => {
-              setShowFavicon(false);
-            }}
+            onLoadingComplete={() => setFaviconLoaded(true)}
+            onError={() => setFaviconLoaded(false)}
           />
-        ) : (
-          <LinkPlaceholderIcon iconClasses={iconClasses} icon="bi-link-45deg" />
-        )
+          {!faviconLoaded && (
+            <LinkPlaceholderIcon
+              iconClasses={iconClasses}
+              icon="bi-link-45deg"
+            />
+          )}
+        </>
       ) : link.type === "pdf" ? (
         <LinkPlaceholderIcon
           iconClasses={iconClasses}