TUL/Backport: Fix home-page SSR->CSR flicker

[jr-rk]

Problem description

Backport from #1287

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:

• Run yarn run sync-i18n -t src/assets/i18n/cs.json5 -i to synchronize messages, and changes are included in this PR.

Manual Testing (if applicable)

• Added to testing scenarios

Copilot review

• Requested review from Copilot

Summary by CodeRabbit

• New Features

  • Added anti-flicker mechanism providing a smoother visual transition during app initialization, eliminating perceived flicker on page load.

• Improvements

  • Enhanced home page rendering to prevent visual delays during theme application.

• Tests

  • Added comprehensive tests for overlay removal behavior on app stability.

• Chores

  • Adjusted production bundle size limits.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a2527bf2-a31f-480a-b60a-5ca0533f39d7

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly describes the main change: fixing a home-page SSR-to-CSR flicker issue. It accurately summarizes the core purpose of the changeset across multiple files.
Description check	✅ Passed	The PR description follows the required template structure and includes the problem description referencing the backport source.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

src/index.html (1)

10-29: 💤 Low value

Hardcoded white background may cause flash on dark themes.

The overlay uses background: #fff`` which will cause a brief white flash if the site theme has a dark background. Consider using a CSS variable or inherit to match the theme.

Suggested approach

     `#__dspace_ssr_overlay` {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       width: 100%;
       z-index: 10000;
-      background: `#fff`;
+      background: var(--ds-background-color, `#fff`);
       pointer-events: none;
     }

This requires the CSS variable to be defined, or you could use background: inherit if the body background is set appropriately.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/index.html` around lines 10 - 29, The `#__dspace_ssr_overlay` element in
the style block with id __dspace-ssr-overlay-style uses a hardcoded white
background (background: `#fff`) which causes a flash on dark themes. Replace the
hardcoded background property with either a CSS variable that respects the site
theme or use background: inherit to match the parent element's background.
Ensure the chosen solution works with your theme's color scheme so the overlay
appears seamless when the page loads.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/index.html`:
- Around line 10-29: The `#__dspace_ssr_overlay` element in the style block with
id __dspace-ssr-overlay-style uses a hardcoded white background (background:
`#fff`) which causes a flash on dark themes. Replace the hardcoded background
property with either a CSS variable that respects the site theme or use
background: inherit to match the parent element's background. Ensure the chosen
solution works with your theme's color scheme so the overlay appears seamless
when the page loads.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5ea61586-ce7b-4669-8f57-1c3ed501a790

📥 Commits

Reviewing files that changed from the base of the PR and between 0eef9e2 and fa485f7.

📒 Files selected for processing (6)

• angular.json
• src/app/app.component.spec.ts
• src/app/app.component.ts
• src/index.html
• src/themes/eager-themes.module.ts
• src/typings.d.ts

[Copilot]

Pull request overview

Backports the “SSR → CSR flicker” mitigation by keeping the SSR-rendered DOM visible during Angular 15’s client bootstrap rebuild, then removing the mask once the app becomes stable.

Changes:

• Re-enabled eager loading of the custom theme module to avoid wrapper lazy-load gaps during bootstrap.
• Added an inline anti-flicker overlay script + CSS in index.html, with a corresponding AppComponent hook to remove the overlay on ApplicationRef.isStable.
• Added typings + unit tests for the new window.__dspaceRemoveSsrOverlay integration and raised production bundle budgets.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/typings.d.ts	Adds a typed Window.__dspaceRemoveSsrOverlay global used by the anti-flicker flow.
src/themes/eager-themes.module.ts	Enables CustomEagerThemeModule eager import to prevent theme wrapper lazy-load gaps.
src/index.html	Introduces the SSR snapshot overlay CSS + pre-bootstrap script that installs/removes the overlay.
src/app/app.component.ts	Removes the SSR overlay after first stable state (with a small rAF + timeout pad).
src/app/app.component.spec.ts	Adds tests asserting overlay removal is called once on stability and is a no-op when absent.
angular.json	Increases production initial bundle size budgets to accommodate the eager theme import.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 2 comments.

[jr-rk]

Switched the SSR overlay-removal trigger from ApplicationRef.isStable to a content-visible signal (!isAuthenticationBlocking && !isThemeLoading), propagating VSB-TUO's fix #1317.

isStable can stay unsettled for seconds after login (esp. admin: background polling / zone tasks / third-party scripts), leaving the page rendered but non-interactive under the SSR mask — the bug VSB-TUO already hit (dataquest-dev/dspace-customers#725). Applied identically across TUL/SAV/ZCU-DATA/ZCU-PUB so the four stay unified.