jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: defer tab bar active state until switchTo() resolves 

The tab bar was setting its `active` attribute synchronously on click,
before TabCache.switchTo() finished fetching and injecting the new pane.
This caused a visual desync where the tab highlighted immediately but
the content area showed a blank flash or stale content.

Now the tab bar dispatches the layer-switch event without changing its
own active state. The shell event handler sets active only after
switchTo() confirms the pane is ready, eliminating the race condition.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-04 19:32:38 -08:00
parent e1688e8456
commit 3c26addeae
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
server/shell.ts
View File

@ -333,12 +333,18 @@ export function renderShell(opts: ShellOptions): string {
} catch(e) { tabCache = null; }
// ── Tab events ──
// Set active on tab bar ONLY after switchTo() confirms the pane is ready.
// This prevents the visual desync where the tab highlights before content loads.
tabBar.addEventListener('layer-switch', (e) => {
const { moduleId } = e.detail;
const { layerId, moduleId } = e.detail;
saveTabs();
if (tabCache) {
tabCache.switchTo(moduleId).then(ok => {
if (!ok) window.location.href = window.__rspaceNavUrl(spaceSlug, moduleId);
if (ok) {
tabBar.setAttribute('active', layerId);
} else {
window.location.href = window.__rspaceNavUrl(spaceSlug, moduleId);
}
});
} else {
window.location.href = window.__rspaceNavUrl(spaceSlug, moduleId);
@ -353,7 +359,11 @@ export function renderShell(opts: ShellOptions): string {
saveTabs();
if (tabCache) {
tabCache.switchTo(moduleId).then(ok => {
if (!ok) window.location.href = window.__rspaceNavUrl(spaceSlug, moduleId);
if (ok) {
tabBar.setAttribute('active', 'layer-' + moduleId);
} else {
window.location.href = window.__rspaceNavUrl(spaceSlug, moduleId);
}
});
} else {
window.location.href = window.__rspaceNavUrl(spaceSlug, moduleId);

7
shared/components/rstack-tab-bar.ts
View File

@ -794,14 +794,14 @@ export class RStackTabBar extends HTMLElement {
// Clean up previous document-level listeners to prevent leak
if (this.#docCleanup) { this.#docCleanup(); this.#docCleanup = null; }
// Tab clicks
// Tab clicks — dispatch event but do NOT set active yet.
// The shell's event handler calls switchTo() and sets active only after success.
this.#shadow.querySelectorAll<HTMLElement>(".tab").forEach(tab => {
tab.addEventListener("click", (e) => {
const target = e.target as HTMLElement;
if (target.classList.contains("tab-close")) return;
const layerId = tab.dataset.layerId!;
const moduleId = tab.dataset.moduleId!;
this.active = layerId;
this.trackRecent(moduleId);
this.dispatchEvent(new CustomEvent("layer-switch", {
detail: { layerId, moduleId },
@ -929,12 +929,11 @@ export class RStackTabBar extends HTMLElement {
this.#shadow.querySelectorAll<HTMLElement>(".layer-plane").forEach(plane => {
const layerId = plane.dataset.layerId!;
// Click to switch layer
// Click to switch layer — do NOT set active here, let shell handler confirm
plane.addEventListener("click", (e) => {
if (this.#flowDragSource || this.#orbitDragging) return;
const layer = this.#layers.find(l => l.id === layerId);
if (layer) {
this.active = layerId;
this.dispatchEvent(new CustomEvent("layer-switch", {
detail: { layerId, moduleId: layer.moduleId },
bubbles: true,