danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Reduce legacy route flicker

Browse source 
Keep React-owned pages out of the legacy page activator during initial bootstrap, and switch the visible React host before paint when the shell mounts.

That removes the refresh flash on /issues while preserving the legacy-page behavior and browser-history stability.

Verified with the router tests and the issues smoke suite.
This commit is contained in:
Antti Kettunen 2026-04-26 17:50:01 +03:00
parent 972910261b
commit ad590fb3db
No known key found for this signature in database
GPG key ID: C6B2A3D250359BD7
2 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
webui/src/platform/shell/route-controllers.tsx
View file

@ -1,5 +1,5 @@
import { useRouter } from '@tanstack/react-router';
import { useEffect, useState } from 'react';
import { useEffect, useLayoutEffect, useState } from 'react';
import { getProfileHomePath, getShellBridge, type ShellPageId } from './bridge';
@ -42,6 +42,14 @@ export function useReactPageShell(pageId: ShellPageId) {
const bridge = useShellBridge();
const router = useRouter();
useLayoutEffect(() => {
if (!bridge) return;
if (!bridge.isPageAllowed(pageId)) return;
bridge.setActivePageChrome(pageId);
bridge.showReactHost(pageId);
}, [bridge, pageId]);
useEffect(() => {
if (!bridge) return;
@ -49,9 +57,6 @@ export function useReactPageShell(pageId: ShellPageId) {
void router.navigate({ href: getProfileHomePath(bridge), replace: true });
return;
}
bridge.setActivePageChrome(pageId);
bridge.showReactHost(pageId);
}, [bridge, pageId, router]);
return bridge;

9
webui/static/search.js
View file

@ -1180,6 +1180,15 @@ async function loadInitialData() {
// Always apply the target page to the legacy shell chrome.
// When the router is present, skipRouteChange keeps the URL stable
// while still syncing the active page/nav state for direct loads.
const router = getWebRouter();
const route = router?.routeManifest?.find((entry) => entry.pageId === targetPage);
if (route?.kind === 'react') {
showReactHost(targetPage);
setActivePageChrome(targetPage);
return;
}
navigateToPage(targetPage, { skipRouteChange: true, forceReload: true });
} catch (error) {
console.error('Error loading initial data:', error);