MENDELU/Backport: Fix home-page SSR->CSR flicker#1315
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Backports an SSR→CSR anti-flicker strategy for the /home page by rendering a “freeze-frame” overlay during bootstrap and removing it once Angular reports the app is stable, reducing the visible flash during client takeover.
Changes:
- Add an inline bootstrap overlay script + CSS in
index.htmlthat clones the SSR-rendered<ds-app>into a fixed overlay and exposeswindow.__dspaceRemoveSsrOverlay(). - Invoke overlay removal from
AppComponentonceApplicationRef.isStablefirst becomestrue(with a short rAF + delay pad). - Add typings for the window global and unit tests covering the stable-state removal behavior.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/index.html |
Adds overlay styles and inline script to clone SSR DOM and later fade/remove it. |
src/app/app.component.ts |
Removes overlay after first stable state using ApplicationRef.isStable outside Angular. |
src/app/app.component.spec.ts |
Adds tests verifying overlay removal and no-op behavior when global isn’t present. |
src/typings.d.ts |
Declares the window.__dspaceRemoveSsrOverlay global for TypeScript. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Make the ApplicationRef.isStable override in the removeSsrOverlayWhenStable suite configurable and restore the original descriptor in afterEach, so the patched observable can't leak onto the shared TestBed instance. Add a test for the requestAnimationFrame-absent fallback branch of the remover. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The overlay holds a deep clone of the SSR DOM purely as a freeze-frame. It was aria-hidden and pointer-events:none, but Tab focus could still land on the dead cloned controls. Add the inert attribute to take it out of the tab order while it exists. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Problem description
Backport from #1287
Before:
After:
Analysis
(Write here, if there is needed describe some specific problem. Erase it, when it is not needed.)
Problems
(Write here, if some unexpected problems occur during solving issues. Erase it, when it is not needed.)
Sync verification
If en.json5 or cs.json5 translation files were updated:
yarn run sync-i18n -t src/assets/i18n/cs.json5 -ito synchronize messages, and changes are included in this PR.Manual Testing (if applicable)
Copilot review