fix toolbar re-render when opening emails

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);
 

components/email/email-viewer.tsx

@@ -3845,19 +3845,22 @@ export function EmailViewer({
         </Button>
 
         {/* Dark/light mode toggle for HTML emails */}
-        {effectiveEmailContent.isHtml && (
+        <Button
-          <Button
+          variant="ghost"
-            variant="ghost"
+          size="sm"
-            size="sm"
+          onClick={() => setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev)}
-            onClick={() => setEmailViewDarkOverride(prev => prev === null ? !(resolvedTheme === 'dark') : !prev)}
+          data-overflow-item
-            data-overflow-item
+          data-overflow-priority="11"
-            data-overflow-priority="11"
+          className={cn(
-            className="hidden sm:inline-flex h-8 gap-1.5"
+            "hidden sm:inline-flex h-8 gap-1.5",
-            title={isDark ? 'View in light mode' : 'View in dark mode'}
+            !effectiveEmailContent.isHtml && "invisible pointer-events-none"
-          >
+          )}
-            {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+          title={isDark ? 'View in light mode' : 'View in dark mode'}
-          </Button>
+          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 && (