Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Better flicker prevention when switching tabs (#1389)

Browse Source 
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
This commit is contained in:
Evan Simkowitz 2024-12-04 20:20:06 -05:00 committed by GitHub
parent 402cf2db98
commit 87aea21184
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/app/store/global.ts
View File

@ -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) => {
return initOpts.tabId;
});
// 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.
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,

6
frontend/app/tab/tab.scss
View File

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

7
frontend/wave.ts
View File

@ -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.
requestAnimationFrame(() => {
// 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, savedInitOpts.tabId);
setTimeout(() => {
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));