fix(mobile): hold the boot-matched splash while the browser connects

The mobile browser flashed the unreachable-server screen during the
ordinary initial connect; it now keeps the logo splash and only shows the
error once the 8s recovery window expires (shared with the native path).
All MobileApp splash logos are 120px to hand off seamlessly from the
static boot splash instead of visibly shrinking.
This commit is contained in:
Bohdan Triapitsyn
2026-07-05 03:08:18 +03:00
parent d762b69cec
commit ed07e7de18
+18 -4
View File
@@ -2345,7 +2345,11 @@ export function MobileApp({ apis }: MobileAppProps) {
}, [clearError, error]);
React.useEffect(() => {
if (!isNativeMobileApp || isConnected || !getRuntimeApiBaseUrl()) {
// Native: only while an instance is selected and reconnecting. Browser: the
// runtime is same-origin (no explicit base URL), so any not-connected spell
// counts — the splash holds until this fires, then the error screen shows.
const waitingOnConnection = !isConnected && (isNativeMobileApp ? Boolean(getRuntimeApiBaseUrl()) : true);
if (!waitingOnConnection) {
setShowConnectionRecovery(false);
return;
}
@@ -2383,7 +2387,7 @@ export function MobileApp({ apis }: MobileAppProps) {
if (!fontsReady) {
return (
<main className="flex min-h-dvh items-center justify-center bg-background text-foreground">
<OpenChamberLogo width={96} height={96} isAnimated />
<OpenChamberLogo width={120} height={120} isAnimated />
</main>
);
}
@@ -2395,7 +2399,7 @@ export function MobileApp({ apis }: MobileAppProps) {
return (
<main className="flex min-h-dvh items-center justify-center bg-background px-6 text-center text-foreground">
<div className="flex max-w-sm flex-col items-center gap-4">
<OpenChamberLogo width={96} height={96} isAnimated={!showConnectionRecovery} />
<OpenChamberLogo width={120} height={120} isAnimated={!showConnectionRecovery} />
{showConnectionRecovery ? (
<>
<div className="space-y-2">
@@ -2424,7 +2428,7 @@ export function MobileApp({ apis }: MobileAppProps) {
if (autoConnectPhase !== 'done') {
return (
<main className="flex min-h-dvh items-center justify-center bg-background text-foreground">
<OpenChamberLogo width={96} height={96} isAnimated />
<OpenChamberLogo width={120} height={120} isAnimated />
</main>
);
}
@@ -2432,6 +2436,16 @@ export function MobileApp({ apis }: MobileAppProps) {
}
if (!isConnected && !isReconnecting) {
// Browser: the initial connect takes a beat — hold the logo splash instead
// of flashing the unreachable-server error while it resolves. The error
// only shows once the recovery delay has expired (genuinely unreachable).
if (!showConnectionRecovery) {
return (
<main className="flex min-h-dvh items-center justify-center bg-background text-foreground">
<OpenChamberLogo width={120} height={120} isAnimated />
</main>
);
}
return (
<main className="flex min-h-dvh items-center justify-center bg-background px-6 text-center text-foreground">
<div className="max-w-sm space-y-3">