From 47fdd3588c7cd177e6d20d0fde109345bb24778d Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sun, 25 Oct 2026 10:22:04 +0100
Subject: [PATCH] fix(collab): a link keeps its glyph until its favicon has
 really loaded

A host that never answered, or answered with a blank pixel, left the chip with an empty square.
---
 client/src/components/Collab/CollabLinks.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Collab/CollabLinks.tsx b/client/src/components/Collab/CollabLinks.tsx
index d1b4d694f..327aa5b60 100644
--- a/client/src/components/Collab/CollabLinks.tsx
+++ b/client/src/components/Collab/CollabLinks.tsx
@@ -25,13 +25,25 @@ interface CollabLink {
   pinned: boolean | number
 }
 
+// The glyph holds the place until a favicon has really arrived: a host that never
+// answers, or answers with a blank pixel, left the chip with an empty square.
 function LinkIcon({ url }: { url: string }) {
-  const [failed, setFailed] = useState(false)
+  const [state, setState] = useState<'loading' | 'loaded' | 'failed'>('loading')
   let favicon = ''
   try { favicon = new URL('/favicon.ico', url).href } catch { /* not a parseable url, fall through to the glyph */ }
+  const loaded = state === 'loaded'
   return (
     <span className="collab-link-chip__icon" aria-hidden="true">
-      {!favicon || failed ? <Link2 size={13} /> : <img src={favicon} alt="" onError={() => setFailed(true)} />}
+      {!loaded && <Link2 size={13} />}
+      {favicon && state !== 'failed' && (
+        <img
+          src={favicon}
+          alt=""
+          hidden={!loaded}
+          onLoad={(e) => setState(e.currentTarget.naturalWidth > 2 ? 'loaded' : 'failed')}
+          onError={() => setState('failed')}
+        />
+      )}
       <span className="collab-link-chip__go"><ExternalLink size={13} /></span>
     </span>
   )