Better flicker prevention when switching tabs (#1389)

There was still some flicker when nohover took effect before the tab
view actually switched. Now, we override the active tab in the tabbar
when the app is switching tabs. We also override active tab behavior so
that the close button is always visible while nohover is in effect. This
effectively removes the flickering

frontend/app/store/global.ts

@@ -43,6 +43,9 @@ function setPlatform(platform: NodeJS.Platform) {
     PLATFORM = platform;
 }
 
+// Used to override the tab id when switching tabs to prevent flicker in the tab bar.
+const overrideStaticTabAtom = atom(null) as PrimitiveAtom<string>;
+
 function initGlobalAtoms(initOpts: GlobalInitOptions) {
     const windowIdAtom = atom(initOpts.windowId) as PrimitiveAtom<string>;
     const clientIdAtom = atom(initOpts.clientId) as PrimitiveAtom<string>;
@@ -100,9 +103,8 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
     const tabAtom: Atom<Tab> = atom((get) => {
         return WOS.getObjectValue(WOS.makeORef("tab", initOpts.tabId), get);
     });
-    const staticTabIdAtom: Atom<string> = atom((get) => {
+    // This atom is used to determine the tab id to use for the static tab. It is set to the overrideStaticTabAtom value if it is not null, otherwise it is set to the initOpts.tabId value.
-        return initOpts.tabId;
+    const staticTabIdAtom: Atom<string> = atom((get) => get(overrideStaticTabAtom) ?? initOpts.tabId);
-    });
     const controlShiftDelayAtom = atom(false);
     const updaterStatusAtom = atom<UpdaterStatus>("up-to-date") as PrimitiveAtom<UpdaterStatus>;
     try {
@@ -625,7 +627,9 @@ function createTab() {
 }
 
 function setActiveTab(tabId: string) {
-    // We use this hack to prevent a flicker in the tab bar when switching to a new tab. This class is unset in reinitWave in wave.ts. See tab.scss for where this class is used.
+    // We use this hack to prevent a flicker of the previously-hovered tab when this view was last active. This class is set in setActiveTab in global.ts. See tab.scss for where this class is used.
+    // Also overrides the staticTabAtom to the new tab id so that the active tab is set correctly.
+    globalStore.set(overrideStaticTabAtom, tabId);
     document.body.classList.add("nohover");
     getApi().setActiveTab(tabId);
 }
@@ -653,6 +657,7 @@ export {
     isDev,
     loadConnStatus,
     openLink,
+    overrideStaticTabAtom,
     PLATFORM,
     pushFlashError,
     pushNotification,

frontend/app/tab/tab.scss

@@ -102,6 +102,7 @@
     }
 }
 
+// Only apply hover effects when not in nohover mode. This prevents the previously-hovered tab from remaining hovered while a tab view is not mounted.
 body:not(.nohover) .tab:hover {
     & + .tab::after,
     &::after {
@@ -120,6 +121,11 @@ body:not(.nohover) .tab:hover {
     }
 }
 
+// When in nohover mode, always show the close button on the active tab. This prevents the close button of the active tab from flickering when nohover is toggled.
+body.nohover .tab.active .close {
+    visibility: visible;
+}
+
 @keyframes expandWidthAndFadeIn {
     from {
         width: var(--initial-tab-width);

frontend/wave.ts

@@ -22,6 +22,7 @@ import {
     initGlobal,
     initGlobalWaveEventSubs,
     loadConnStatus,
+    overrideStaticTabAtom,
     pushFlashError,
     pushNotification,
     removeNotificationById,
@@ -88,12 +89,12 @@ async function reinitWave() {
     console.log("Reinit Wave");
     getApi().sendLog("Reinit Wave");
 
-    // We use this hack to prevent a flicker in the tab bar when switching to a new tab. This class is set in setActiveTab in global.ts. See tab.scss for where this class is used.
+    // We use this hack to prevent a flicker of the previously-hovered tab when this view was last active. This class is set in setActiveTab in global.ts. See tab.scss for where this class is used.
-    requestAnimationFrame(() => {
+    // Also overrides the staticTabAtom to the new tab id so that the active tab is set correctly.
-        setTimeout(() => {
+    globalStore.set(overrideStaticTabAtom, savedInitOpts.tabId);
-            document.body.classList.remove("nohover");
+    setTimeout(() => {
-        }, 100);
+        document.body.classList.remove("nohover");
-    });
+    }, 100);
 
     const client = await WOS.reloadWaveObject<Client>(WOS.makeORef("client", savedInitOpts.clientId));
     const waveWindow = await WOS.reloadWaveObject<WaveWindow>(WOS.makeORef("window", savedInitOpts.windowId));