From 4f1390fdeb70fe024f85be117d5aaf8094949d0a Mon Sep 17 00:00:00 2001
From: Max Hao <max@maxhao.org>
Date: Tue, 16 Jun 2026 09:31:34 -0400
Subject: [PATCH] fix toolbar re-render when opening emails

---
 app/(main)/[locale]/page.tsx      |  7 +++----
 components/email/email-viewer.tsx | 32 ++++++++++++++++---------------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/app/(main)/[locale]/page.tsx b/app/(main)/[locale]/page.tsx
index a575d1e2..1edd0997 100644
--- a/app/(main)/[locale]/page.tsx
+++ b/app/(main)/[locale]/page.tsx
@@ -2273,11 +2273,10 @@ export default function Home() {
       setShowComposer(false);
     }
 
-    // waiting for the body fetch - avoids the loading flicker.
+    // Find the list-level email for metadata (accountId, scheduled flags, etc.)
+    // but don't select it yet — wait for the full fetch to avoid a toolbar flash
+    // caused by rendering with the stub (no bodyValues) then re-rendering with the full email.
     const listEmail = activeEmails.find(e => e.id === email.id);
-    if (listEmail) {
-      selectEmail(listEmail);
-    }
 
     setLoadingEmail(true);
 
diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index f5b4b986..5c9b0d42 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -3845,19 +3845,22 @@ export function EmailViewer({
         </Button>
 
         {/* Dark/light mode toggle for HTML emails */}
-        {effectiveEmailContent.isHtml && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev)}
-            data-overflow-item
-            data-overflow-priority="11"
-            className="hidden sm:inline-flex h-8 gap-1.5"
-            title={isDark ? 'View in light mode' : 'View in dark mode'}
-          >
-            {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-          </Button>
-        )}
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev)}
+          data-overflow-item
+          data-overflow-priority="11"
+          className={cn(
+            "hidden sm:inline-flex h-8 gap-1.5",
+            !effectiveEmailContent.isHtml && "invisible pointer-events-none"
+          )}
+          title={isDark ? 'View in light mode' : 'View in dark mode'}
+          tabIndex={effectiveEmailContent.isHtml ? 0 : -1}
+          aria-hidden={!effectiveEmailContent.isHtml}
+        >
+          {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+        </Button>
 
         {/* More menu - click-based */}
         <div ref={moreMenuRef} className="relative">
@@ -4098,9 +4101,8 @@ export function EmailViewer({
 
   return (
     <div
-      key={email.id}
       data-tour="email-viewer"
-      className={cn("flex-1 flex flex-row h-full bg-background overflow-hidden animate-in fade-in duration-300 relative", className)}
+      className={cn("flex-1 flex flex-row h-full bg-background overflow-hidden relative", className)}
     >
     {/* Mobile More menu sidebar overlay */}
     {!isScheduled && isMobile && moreMenuOpen && (