From bc0109127031d80f1e4c3bdcc5eb710ea622f150 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Sat, 5 Sep 2026 13:40:20 -0700
Subject: [PATCH] Replace loading dots with animated spinner icons

Replaces the small dot indicators with animated Loader2 icons that
appear in place of the favicon while tabs are loading. Provides
clearer, more prominent visual feedback during navigation.
---
 src/renderer/src/components/browser-favicon.tsx       | 11 ++++++++++-
 src/renderer/src/components/tab-bar/BrowserTab.tsx    |  5 +----
 .../src/components/tab-bar/ClientHostedBrowserTab.tsx | 11 +++++------
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/renderer/src/components/browser-favicon.tsx b/src/renderer/src/components/browser-favicon.tsx
index 92b14a6ad64..b2e8b43b7a0 100644
--- a/src/renderer/src/components/browser-favicon.tsx
+++ b/src/renderer/src/components/browser-favicon.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Globe } from 'lucide-react'
+import { Globe, Loader2 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { displayableFaviconUrl } from './browser-pane/describe-page/browser-favicon-url'
 
@@ -32,6 +32,15 @@ export function BrowserFavicon({
     setFailedUrl(null)
   }
 
+  if (loading) {
+    return (
+      <Loader2
+        className={cn('shrink-0 motion-safe:animate-spin', className, fallbackClassName)}
+        aria-hidden="true"
+      />
+    )
+  }
+
   if (displayUrl && failedUrl !== displayUrl) {
     return (
       <img
diff --git a/src/renderer/src/components/tab-bar/BrowserTab.tsx b/src/renderer/src/components/tab-bar/BrowserTab.tsx
index 507b738318a..3b716c3bd51 100644
--- a/src/renderer/src/components/tab-bar/BrowserTab.tsx
+++ b/src/renderer/src/components/tab-bar/BrowserTab.tsx
@@ -191,15 +191,12 @@ export default function BrowserTab({
           muted-foreground made the icon read as "disabled" in practice. */}
       <BrowserFavicon
         faviconUrl={tab.faviconUrl}
-        loading={tab.loading}
+        loading={tab.loading && !tab.loadError && !isBlankBrowserTab(tab)}
         className="size-3 mr-1"
         fallbackClassName="text-blue-500"
       />
       {isPinned && <Pin className="mr-1 size-3 shrink-0 text-muted-foreground" aria-hidden />}
       <span className={`${TAB_LABEL_WIDTH_CLASSES} mr-1`}>{tabLabel}</span>
-      {tab.loading && !tab.loadError && !isBlankBrowserTab(tab) && (
-        <span className="mr-1 size-1.5 rounded-full bg-sky-500/80 shrink-0" />
-      )}
       {!isPinned && (
         <button
           className={`flex items-center justify-center w-4 h-4 rounded-sm shrink-0 ${
diff --git a/src/renderer/src/components/tab-bar/ClientHostedBrowserTab.tsx b/src/renderer/src/components/tab-bar/ClientHostedBrowserTab.tsx
index 1ca91557b0e..2b21260fb5e 100644
--- a/src/renderer/src/components/tab-bar/ClientHostedBrowserTab.tsx
+++ b/src/renderer/src/components/tab-bar/ClientHostedBrowserTab.tsx
@@ -1,4 +1,4 @@
-import { Laptop, X } from 'lucide-react'
+import { Laptop, Loader2, X } from 'lucide-react'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { translate } from '@/i18n/i18n'
 import type { ClientHostedBrowserRow } from '../../../../shared/client-hosted-browser-rows'
@@ -36,6 +36,8 @@ export default function ClientHostedBrowserTab({
   onClose: () => void
   includeTopTabBorder?: boolean
 }): React.JSX.Element {
+  const loading = row.loading && !row.hostAbsent
+  const PageIcon = loading ? Loader2 : Laptop
   const label = getClientHostedBrowserRowLabel(row)
   const hostDescription = describeClientHostedBrowserRowHost(row)
 
@@ -62,8 +64,8 @@ export default function ClientHostedBrowserTab({
             }}
           >
             {isActive && <span className={ACTIVE_TAB_INDICATOR_CLASSES} aria-hidden />}
-            <Laptop
-              className={`mr-1 size-3 shrink-0 ${row.hostAbsent ? 'text-muted-foreground' : 'text-blue-500'}`}
+            <PageIcon
+              className={`mr-1 size-3 shrink-0 ${loading ? 'motion-safe:animate-spin' : ''} ${row.hostAbsent ? 'text-muted-foreground' : 'text-blue-500'}`}
               aria-hidden
             />
             <span
@@ -71,9 +73,6 @@ export default function ClientHostedBrowserTab({
             >
               {label}
             </span>
-            {row.loading && (
-              <span className="mr-1 size-1.5 shrink-0 rounded-full bg-sky-500/80" aria-hidden />
-            )}
             <button
               type="button"
               aria-label={translate('browser.clientHosted.hostRowClose', 'Close hosted page')}