Comfy-Org / Comfy-Org/ComfyUI_frontend

Splash logo wave animation imperceptible on fast/cached loads (no minimum display time)

Open
#13,988 1 comment 1 reaction 0 assignees View on GitHub
area:ui
Dominant language
TypeScript
Stars
2k
Forks
704
Avg merge
1d 8h
Merged PRs (30d)
512

Description

## Problem / Goal
QA (Denys, 1.47 RC re-test on https://frontend-rc.testenvs.comfy.org/) reported the Comfy logo animation is not visible on the login/loading screen.

**This is not a regression and not a deploy/asset issue.** Filing as a low-priority UX tracking item so the perceived-missing animation has a home and product/design can decide whether to change it.

The animated login/loading logo is the pre-Vue splash loader inlined in `index.html` (`#splash-loader`, z-9999) — a pure-CSS keyframe animation (`splash-rise` 4s + `splash-wave` 1.2s) over an inline SVG wave-fill mask. In `main` since #9516 (inlined by #9849).

Served-build check against the RC:
- Fetched the live RC HTML; `#splash-loader` and all keyframes (`wave-group`, `wave-path`, `splash-rise`, `splash-wave`) are present.
- The splash CSS block is **byte-identical** to `origin/main` (1275 chars). The animation code is present and correct in the deployed build.

Root cause of the perceived absence: the splash is removed the instant the first Vue view mounts — `CloudLayoutView.vue` (login/onboarding) and `UserSelectView.vue` call `document.getElementById('splash-loader')?.remove()` in `onMounted`; `App.vue` removes it when the workspace spinner clears. On a fast/warm/cached load the view mounts within a few hundred ms, before the 4s `splash-rise` has visibly filled the logo (the mask starts empty at `translateY(280px)` and fills as it rises). The user sees only a brief faint outline. It is also disabled outright under OS `prefers-reduced-motion: reduce`. This behavior is identical on prod and RC and is independent of the 1.47 changes.

## Proposed Solution
Give the splash a minimum on-screen duration so at least one visible fill cycle plays before it is torn down. Options:
- Track a `splashShownAt` timestamp when the loader is first painted and defer `#splash-loader` removal until `max(0, MIN_MS - elapsed)` (e.g. `MIN_MS ≈ 800`), applied consistently across the three removal sites (`App.vue`, `CloudLayoutView.vue`, `UserSelectView.vue`).
- Or gate removal on the first `animationiteration`/short timeout.
- Or decide this is working-as-intended and close.

## Acceptance Criteria
- [ ] On a fast/warm/cached load of the login/loading screen, the splash logo shows a visibly animating (rising/waving) fill for a perceptible minimum duration before removal.
- [ ] `prefers-reduced-motion: reduce` still short-circuits the animation (static logo) and is unaffected.
- [ ] Removal remains consistent across `App.vue`, `CloudLayoutView.vue`, and `UserSelectView.vue` (no double-remove errors, no lingering splash after mount).
- [ ] No added perceptible delay to time-to-interactive beyond the chosen minimum splash window.

_Filed from 1.47 RC QA triage. Not a 1.47 regression; served animation code matches `main` exactly._

Contributor guide

Open the contributing guide

Research direction

Start with the inlined #splash-loader and keyframes in index.html, then trace the removal calls in App.vue, CloudLayoutView.vue, and UserSelectView.vue. Exercise fast, warm, or cached login/loading paths while checking prefers-reduced-motion behavior. Done means a visibly animating splash remains for the chosen minimum duration, removal stays consistent, and no lingering loader or unacceptable time-to-interactive delay remains.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
frontend, performance
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.