fix(app): avoid layout flash during cohort detection

This commit is contained in:
usrnk1 2026-07-13 14:40:32 +02:00
commit 5e5e305bb7

View file

@ -289,7 +289,7 @@ function layoutClassificationRequest<T>(promise: Promise<T>, onTimeout: () => vo
}) })
} }
function LayoutTransitionClassifier() { function LayoutTransitionGate(props: ParentProps) {
const settings = useSettings() const settings = useSettings()
const server = useServer() const server = useServer()
const global = useGlobal() const global = useGlobal()
@ -358,8 +358,8 @@ function LayoutTransitionClassifier() {
) )
void layoutClassificationRequest( void layoutClassificationRequest(
Promise.all([ Promise.all([
client.project.list(undefined, { signal: abort.signal }), client.project.list(undefined, { signal: abort.signal, throwOnError: true }),
client.session.list({ limit: 1 }, { signal: abort.signal }), client.session.list({ limit: 1 }, { signal: abort.signal, throwOnError: true }),
wsl, wsl,
]), ]),
() => abort.abort(), () => abort.abort(),
@ -383,7 +383,18 @@ function LayoutTransitionClassifier() {
}) })
}) })
return null return (
<Show
when={settings.general.layoutTransitionClassified()}
fallback={
<div class="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-background-base">
<Splash class="w-16 h-20 opacity-50 animate-pulse" />
</div>
}
>
{props.children}
</Show>
)
} }
// Server-agnostic providers shared across every route. These live in the shared // Server-agnostic providers shared across every route. These live in the shared
@ -671,25 +682,26 @@ export function AppInterface(props: {
<GlobalProvider> <GlobalProvider>
<SettingsProvider> <SettingsProvider>
<ConnectionGate disableHealthCheck={props.disableHealthCheck} startup={props.startup}> <ConnectionGate disableHealthCheck={props.disableHealthCheck} startup={props.startup}>
<LayoutTransitionClassifier /> <LayoutTransitionGate>
<Show when={useSettings().general.newLayoutDesigns().toString()} keyed> <Show when={useSettings().general.newLayoutDesigns().toString()} keyed>
<Dynamic <Dynamic
component={props.router ?? Router} component={props.router ?? Router}
root={(routerProps) => ( root={(routerProps) => (
<TabsProvider> <TabsProvider>
<NotificationProvider> <NotificationProvider>
<ServerShell> <ServerShell>
<Show when={useSettings().general.newLayoutDesigns()} fallback={routerProps.children}> <Show when={useSettings().general.newLayoutDesigns()} fallback={routerProps.children}>
<NewAppLayout serverScoped={props.serverScoped}>{routerProps.children}</NewAppLayout> <NewAppLayout serverScoped={props.serverScoped}>{routerProps.children}</NewAppLayout>
</Show> </Show>
</ServerShell> </ServerShell>
</NotificationProvider> </NotificationProvider>
</TabsProvider> </TabsProvider>
)} )}
> >
<Routes serverScoped={props.serverScoped} /> <Routes serverScoped={props.serverScoped} />
</Dynamic> </Dynamic>
</Show> </Show>
</LayoutTransitionGate>
</ConnectionGate> </ConnectionGate>
</SettingsProvider> </SettingsProvider>
</GlobalProvider> </GlobalProvider>