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>
Mendelu was the last instance still on the original ApplicationRef.isStable trigger. isStable is held hostage by post-login/admin zone activity, so the hydration-safe clone overlay lingered over an app that had long finished (the same class of problem as dspace-customers#725 - visually here, since the clone lets clicks through, but the frozen frame still sat there for up to 15s). Port the final trigger used across the other customers: drop the clone once the auth/theme loader gate opens AND the live <ds-app> DOM has settled (MutationObserver + quiet window, content-height / #main-content check, 10s cap), decoupled from isStable. The Angular-18 hydration-safe CLONE index.html is unchanged (comments only); the DOM-settle trigger lives in AppComponent. Spec, theme-service mock and an OnDestroy teardown updated to match. NOTE: hand-port to the Angular-18 stack - CI validates compile + unit tests but NOT the real hydration + clone + DOM-settle timing; needs a visual check on a running Mendelu instance (authenticated hard reload) before merge. Ref: #1318, #1321 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