From 3dcfe524a88f11756c18a7dd1eb6cedfa1a4c6fb Mon Sep 17 00:00:00 2001
From: Ares90125 <arescolin1008@gmail.com>
Date: Thu, 14 May 2026 07:27:05 -0700
Subject: [PATCH] fix(ui): eliminate sidebar Filters flash on tab switch

---
 src/components/issues/IssuesList.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/issues/IssuesList.tsx b/src/components/issues/IssuesList.tsx
index e3ad100d..cb52e431 100644
--- a/src/components/issues/IssuesList.tsx
+++ b/src/components/issues/IssuesList.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react';
 import {
   DebouncedSearchInput,
   useDebouncedSearchDraft,
@@ -272,8 +278,15 @@ const IssuesList: React.FC<IssuesListProps> = ({
   );
 
   const isLargeScreen = useMediaQuery(theme.breakpoints.up('xl'));
-  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
-  useEffect(() => {
+  // Resolve the sidebar portal target synchronously so a tab switch (which
+  // remounts this list) renders straight into the sidebar instead of
+  // flashing the toolbar inline for one frame.
+  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(() =>
+    document.getElementById('tabs-options-portal'),
+  );
+  // On the very first page load the portal node is committed after this
+  // list's first render — pick it up before paint to avoid a flash.
+  useLayoutEffect(() => {
     setPortalTarget(document.getElementById('tabs-options-portal'));
   }, []);