Repository navigation
fix(frontend): restore the startup screen and load transitions lost in the Start rewrite - #148
Merged
Merged
Conversation
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Restores the startup fade the legacy bootstrap ran on #app before the Start rewrite. CSS runs it on the server-rendered first paint; reduced motion disables it through the global motion-reduce rules. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The legacy AppEffects enabled background/transform transitions on body once preferences were ready, so theme changes animate without a flash from the default theme at load. Start's chrome runtime dropped it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Restores the TypingLoader cover the legacy index.html prerendered, now as a Start component that fades itself out on request. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The startup screen and body theme transition key off one app-owned readiness signal. The cookie prompt waits until the startup screen has faded, as it did before the Start rewrite. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The startup screen covers first paint, so #app stays transparent until the app is ready and then plays the entrance animation. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Restores the pre-Start load sequence: the server renders the typing loader over a transparent #app; when the chrome and preferences are ready the loader fades out and the app fades in. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
voltcrash
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Before the TanStack Start rewrite, the page loaded behind a
#startupScreencover showing the TypingLoader. Once config and preferences were ready, the cover faded out (150ms),#appfaded in (250ms), and body theme transitions turned on. The rewrite removed all of this, so the page content now lays itself out in plain view during load.feat(styles):--animate-app-enter(fadeIn 0.25s ease-out) tokenfeat(app): app-ownedisAppReady/isStartupFinishedsignals (app/startup.ts)feat(layout): server-renderedStartupScreen(TypingLoader cover); fades out on request and accepts input during the fade.TypingLoaderis marked SSR-safe in import boundaries.feat(chrome): chrome runtime marks the app ready once its module and preferences have loaded, and still marks it ready if preferences fail, so the cover can't get stuck. The cookie prompt waits until the cover is gone, as it did before.fix(chrome): restores thebackground .25s, transform .05sbody transition after the app is readyrefactor(layout)/feat(layout):#apprendersopacity-0under the cover, then plays the entrance animation once ready. Client navigation keeps the element, so this runs once per load.motion-reducerules disable the animations, and the cover is removed straight away.Verification
#startupScreenand#app.opacity-0. After hydration the cover is removed,#appgetsanimate-app-enter(ends at opacity 1), the body gets its transition, and the cookie modal opens after the cover is gone.foundation.spec.tsEXDEV cross-device/tmprename;update/runtime.spec.tsxexpectsTESTINGenv)🤖 Generated with Claude Code