fix(app): avoid layout flash during cohort detection
This commit is contained in:
parent
d87f987800
commit
5e5e305bb7
1 changed files with 35 additions and 23 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue