fix(FR-2530): eliminate blank screen flash between splash and React mount by yomybaby · Pull Request #6605 · lablup/backend.ai-webui

yomybaby · 2026-04-10T12:35:38Z

Summary

Eliminates the blank white screen gap between splash overlay dismissal and React UI rendering by switching to React-driven splash dismissal.

Changes

Change	Purpose
`MainLayout.tsx`: Wrap sider+layout in single `<Suspense fallback={null}>`	Splash stays visible until entire layout renders
`MainLayout.tsx`: Add `DismissSplashOnMount` with `main-layout-ready` event	Dismiss splash only after sider/header actually render
`LoginView.tsx`: Add `waitForMainLayout` prop	Delay login panel close until MainLayout is ready; `false` for routes without MainLayout (e.g. `/interactive-login`)
`LoginView.tsx`: Preload post-login lazy chunks on mount	Reduce login-to-dashboard transition time via `requestIdleCallback`
`routes.tsx`: Add `preloadPostLoginChunks()`	Preload DashboardPage, StartPage, and other common lazy components
`index.html`: Fix splash cube DOM order (1,2,4,3 → 1,2,3,4)	Correct animation sequence
`index.html`: Wrap cube+text in `splash-loading` div	Enable flexbox alignment
`index.html`: Increase MutationObserver fallback to 3s	Prevent racing with React-driven dismiss
`resources/webui.css`: Splash loading flexbox layout	Cube vertically centered with text, left-aligned with version info
Delete `LoadingCurtain.tsx` + test	Redundant — splash handles full loading lifecycle

Test plan

Logged-in: Reload any page — splash fades directly to rendered UI (header + sider visible), no white flash
Logged-out: Navigate to app — splash covers until login form appears, then fades
Login flow: After clicking Login, no blank screen between login modal and dashboard
/interactive-login: Login form closes immediately after authentication
Independent routes (/verify-email, /change-password) — splash works via 3s MutationObserver fallback
Dark theme — correct background color during splash (no white flash)
Electron app — splash drag area still functional

scripts/verify.sh: ALL PASS

yomybaby · 2026-04-10T12:35:53Z

fix(FR-2530): eliminate blank screen flash between splash and React mount #6605 👈 (View in Graphite)
main

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

flow:merge-queue - adds this PR to the back of the merge queue
flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has required the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2026-04-10T12:38:37Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	8.88% (-0.07% 🔻)	1736/19549
🔴	Branches	8.04% (-0.02% 🔻)	1097/13637
🔴	Functions	5.33% (-0.08% 🔻)	284/5326
🔴	Lines	8.57% (-0.07% 🔻)	1628/18992

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🔴	preload.ts	0%	0%	0%	0%

Test suite run success

847 tests passing in 38 suites.

Report generated by 🧪jest coverage report action from 5f22f4f

Copilot

Pull request overview

Eliminates the blank-screen gap between the HTML splash overlay and the initial React UI by making splash dismissal driven by React readiness (login form visibility or MainLayout render).

Changes:

Add React-driven splash dismissal hooks (__dismissSplash, main-layout-ready) and adjust MainLayout/LoginView timing to avoid the white flash.
Preload common post-login lazy chunks from the login screen to speed up the login→dashboard transition.
Update splash DOM/CSS (layout, cube order, drag area) and remove the now-redundant LoadingCurtain component + test.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`resources/webui.css`	Reworks splash overlay styling (fixed full-screen, flex layout, drag area, loading alignment).
`index.html`	Moves splash outside React root, adds critical inline CSS + React-driven dismissal script, fixes cube order/layout.
`react/src/routes.tsx`	Adds `preloadPostLoginChunks()` and adjusts `LoginView` usage for `/interactive-login`.
`react/src/components/MainLayout/MainLayout.tsx`	Removes `LoadingCurtain`, changes Suspense structure, dispatches `main-layout-ready` and dismisses splash on mount.
`react/src/components/LoginView.tsx`	Adds `waitForMainLayout` option, preloads chunks on mount, delays panel close until MainLayout readiness, dismisses splash when login form opens.
`react/src/components/LoadingCurtain.tsx`	Deleted (superseded by HTML splash lifecycle).
`react/src/components/LoadingCurtain.test.tsx`	Deleted along with the component.

…reen Root cause: splash was dismissed before header/sider rendered. 1. Replace backend-ai-connected listener with globalThis.__dismissSplash() 2. MainLayout: DismissSplashOnMount inside header Suspense boundary fires only after WebUIHeader actually renders 3. LoginView: dismiss in open() callback when login form becomes visible (only fires in logged-out state) 4. MutationObserver fallback increased to 3s (was 800ms) to avoid racing with React-driven dismiss on normal routes 5. React-driven dismiss cancels MutationObserver fallback timer 6. Inline critical CSS in <head> for splash visibility before external CSS loads 7. Body background set inline to prevent white flash Verified via Playwright: splash fades only after UI is visible in both logged-in (header+sider) and logged-out (login form) flows.

nowgnuesLee

LGTM

graphite-app · 2026-04-13T03:27:15Z

Merge activity

Apr 13, 3:27 AM UTC: nowgnuesLee added this pull request to the Graphite merge queue.
Apr 13, 3:30 AM UTC: The Graphite merge queue couldn't merge this PR because it failed for an unknown reason.
Apr 13, 3:49 AM UTC: yomybaby added this pull request to the Graphite merge queue.
Apr 13, 3:51 AM UTC: The Graphite merge queue couldn't merge this PR because it failed for an unknown reason.

github-actions Bot assigned yomybaby Apr 10, 2026

github-actions Bot added area:ux UI / UX issue. size:L 100~500 LoC labels Apr 10, 2026

yomybaby mentioned this pull request Apr 10, 2026

feat(FR-2524): improve Model Store page UX with filter persistence, deploy guidance, and cleanup #6604

Merged

6 tasks

yomybaby force-pushed the 04-10-fix_fr-2518_eliminate_blank_screen_between_splash_and_react_mount branch 7 times, most recently from 3ea0463 to fa8d365 Compare April 11, 2026 08:33

github-actions Bot added size:XL 500~ LoC and removed size:L 100~500 LoC labels Apr 11, 2026

yomybaby changed the base branch from 04-10-feat_fr-2524_improve_model_store_page_ux to graphite-base/6605 April 11, 2026 10:05

yomybaby force-pushed the 04-10-fix_fr-2518_eliminate_blank_screen_between_splash_and_react_mount branch from fa8d365 to ac2129c Compare April 11, 2026 10:05

yomybaby force-pushed the graphite-base/6605 branch from b1ab3c8 to c96b588 Compare April 11, 2026 10:05

yomybaby changed the base branch from graphite-base/6605 to main April 11, 2026 10:05

yomybaby changed the title ~~fix(FR-2518): eliminate blank screen between splash and React mount~~ fix(FR-2530): eliminate blank screen flash between splash and React mount Apr 11, 2026

yomybaby marked this pull request as ready for review April 11, 2026 10:22

Copilot AI review requested due to automatic review settings April 11, 2026 10:22

Copilot started reviewing on behalf of yomybaby April 11, 2026 10:22 View session

Copilot AI reviewed Apr 11, 2026

View reviewed changes

Comment thread react/src/routes.tsx Outdated

Comment thread react/src/components/LoginView.tsx Outdated

Comment thread react/src/components/MainLayout/MainLayout.tsx

yomybaby force-pushed the 04-10-fix_fr-2518_eliminate_blank_screen_between_splash_and_react_mount branch from ac2129c to 5f22f4f Compare April 11, 2026 10:42

yomybaby requested a review from nowgnuesLee April 13, 2026 00:52

nowgnuesLee approved these changes Apr 13, 2026

View reviewed changes

yomybaby merged commit 1690bd5 into main Apr 13, 2026
12 checks passed

yomybaby deleted the 04-10-fix_fr-2518_eliminate_blank_screen_between_splash_and_react_mount branch April 13, 2026 03:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(FR-2530): eliminate blank screen flash between splash and React mount#6605

fix(FR-2530): eliminate blank screen flash between splash and React mount#6605
yomybaby merged 1 commit intomainfrom
04-10-fix_fr-2518_eliminate_blank_screen_between_splash_and_react_mount

yomybaby commented Apr 10, 2026 •

edited

Loading

Uh oh!

yomybaby commented Apr 10, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 10, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nowgnuesLee left a comment

Uh oh!

graphite-app Bot commented Apr 13, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

yomybaby commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Test plan

Uh oh!

yomybaby commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

github-actions Bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./react

Test suite run success

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nowgnuesLee left a comment

Choose a reason for hiding this comment

Uh oh!

graphite-app Bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yomybaby commented Apr 10, 2026 •

edited

Loading

yomybaby commented Apr 10, 2026 •

edited

Loading

github-actions Bot commented Apr 10, 2026 •

edited

Loading

Coverage report for `./react`

graphite-app Bot commented Apr 13, 2026 •

edited

Loading