Skip to content

feat: sync loading screens with real backend progress#581

Merged
leszko merged 3 commits intomainfrom
emran/cloud-load-ux-stopgap-fixes
Mar 6, 2026
Merged

feat: sync loading screens with real backend progress#581
leszko merged 3 commits intomainfrom
emran/cloud-load-ux-stopgap-fixes

Conversation

@emranemran
Copy link
Copy Markdown
Contributor

@emranemran emranemran commented Mar 4, 2026 •
edited
Loading

The loading screens previously showed static text ("Loading..." / "Connecting to cloud...") with no indication of what was actually happening. This PR makes the backend report its current substage during cloud connection and pipeline loading, and the frontend displays it in real time.

The backend sets a string variable (_connect_stage or _loading_stage) before each slow operation. The frontend polls the status endpoint every 1-2 seconds and displays whatever string the backend currently reports. When the operation finishes, the backend clears the variable.

Cloud connection loading screen

When connecting to fal cloud, the user sees these messages in sequence:

Connecting to cloud...       ← WebSocket connecting to fal
Starting cloud server...     ← waiting for cloud GPU server to be ready
Setting up video stream...   ← WebRTC negotiation

Backend (cloud_connection.py): A _connect_stage field is set at each step in connect() and start_webrtc(), and cleared on completion or error. Exposed via connect_stage in CloudStatusResponse.

Frontend (useCloudStatus.tsx): The polled status now includes connect_stage. Passed through StreamPage → VideoOutput as cloudConnectStage.

Pipeline loading screen

When loading a heavy ML pipeline (e.g. LongLive, Krea), the user sees:

Loading diffusion model...   ← loading the main neural network weights (~30s)
Loading text encoder...      ← loading the text understanding model (~5s)
Loading VAE...               ← loading the image encoder/decoder (~3s)
Initializing pipeline...     ← wiring components together (<1s)
Warming up model...          ← only for Krea: pre-running inference to compile kernels

For lightweight pipelines (passthrough, gray, optical-flow, etc.) and plugin pipelines, the user sees:

Initializing pipeline...     ← simple setup, finishes quickly

Backend (pipeline_manager.py): A _loading_stage field is set before calling the pipeline constructor, and a stage_callback function is passed into the constructor. Each pipeline calls stage_callback("Loading diffusion model...") etc. before its heavy operations. Exposed via loading_stage in PipelineStatusResponse.

Frontend (usePipeline.ts): The polled status now includes loading_stage. Passed through StreamPage → VideoOutput as pipelineLoadingStage.

Other changes

  • Cloud status text label (Connected/Connecting/Disconnected) added next to cloud icon in header

Test plan

  • Connect to cloud → see "Connecting to cloud..." → "Starting cloud server..." → "Setting up video stream..."
  • Load a heavy pipeline (e.g. LongLive) → see "Loading diffusion model..." → "Loading text encoder..." → "Loading VAE..." → "Initializing pipeline..."
  • Load a lightweight pipeline → see "Initializing pipeline..."
  • Cloud status label in header shows correct state
  • Fallback text shown if backend hasn't reported a stage yet

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 4, 2026 •
edited
Loading

🚀 fal.ai Preview Deployment
App ID daydream/scope-pr-581--preview
WebSocket wss://fal.run/daydream/scope-pr-581--preview/ws
Commit fc89c30

Testing

Connect to this preview deployment by running this on your branch:

uv run build && SCOPE_CLOUD_APP_ID="daydream/scope-pr-581--preview/ws" uv run daydream-scope

🧪 E2E tests will run automatically against this deployment.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 4, 2026 •
edited
Loading

❌ E2E Tests failed
Status failed
fal App daydream/scope-pr-581--preview
Run View logs

Test Artifacts

Check the workflow run for screenshots, traces, and failure details.

@emranemran emranemran marked this pull request as ready for review March 4, 2026 19:30
@emranemran emranemran force-pushed the emran/cloud-load-ux-stopgap-fixes branch from 944d75a to 37d7f28 Compare March 4, 2026 19:34
@emranemran
Copy link
Copy Markdown
Contributor Author

emranemran commented Mar 4, 2026

Screenshot_2026-03-04_112412

ryanontheinside
ryanontheinside requested changes Mar 5, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@ryanontheinside ryanontheinside left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As discuss offline with Emran, the cycling loading message is great, but would be even better as purely technical messages that convey what is actually happening (ie "loading model...", "running warmup..."). Since this is the first output users will see from the system it is worth being opinionated about

@emranemran emranemran changed the title feat: improve cloud relay loading UX with cycling messages and status… feat: sync loading screens with real backend progress Mar 5, 2026
@emranemran emranemran force-pushed the emran/cloud-load-ux-stopgap-fixes branch from e739d4f to dbcc225 Compare March 6, 2026 05:00
@emranemran
Sync loading screens with real backend progress and improve cloud UX
ce9adf9 
Replace decorative rotating loading messages with real backend substage
reporting. Add cloud status text label to header. Backend tracks
connection and pipeline loading stages, frontend displays them directly.

Signed-off-by: emranemran <[email protected]>
@emranemran emranemran force-pushed the emran/cloud-load-ux-stopgap-fixes branch from dbcc225 to ce9adf9 Compare March 6, 2026 05:19
@emranemran
Copy link
Copy Markdown
Contributor Author

emranemran commented Mar 6, 2026

As discuss offline with Emran, the cycling loading message is great, but would be even better as purely technical messages that convey what is actually happening (ie "loading model...", "running warmup..."). Since this is the first output users will see from the system it is worth being opinionated about

@ryanontheinside done!

@emranemran
Fix e2e cloud-streaming test selector for cloud button
0646380 
The cloud button's accessible name changed from "Cloud disconnected"
to just "Disconnected" when text labels were added to the button.
Use a title-based CSS selector instead of getByRole name matching.

Signed-off-by: emranemran <[email protected]>
@ryanontheinside ryanontheinside self-requested a review March 6, 2026 11:23
ryanontheinside
ryanontheinside approved these changes Mar 6, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@ryanontheinside ryanontheinside left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lg lg lg

@leszko @claude
Fix inconsistent _loading_stage access by always using set_loading_st…
fc89c30 
…age()

Co-Authored-By: Claude Opus 4.6 <[email protected]>
Signed-off-by: Rafał Leszko <[email protected]>
@leszko
Copy link
Copy Markdown
Collaborator

leszko commented Mar 6, 2026

Pushed a small fix. Merging.

@leszko leszko merged commit 672efec into main Mar 6, 2026
7 checks passed
@mjh1 mjh1 mentioned this pull request Mar 11, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ryanontheinside ryanontheinside ryanontheinside approved these changes

+1 more reviewer

@mjh1 mjh1 mjh1 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@emranemran @leszko @mjh1 @ryanontheinside