TUL/Fix SSR overlay never revealing after reload (add id="main-content")

[milanmajchrak]

Problem description

On the TUL instance the home page froze for ~10 s on every hard reload ("stránka nereaguje po reloade") — the same SSR anti-flicker fix (#1287 → TUL #1310, #1354) works correctly on ZCU. This backport shipped a selector precondition TUL's template never satisfied.

Root cause

The SSR anti-flicker overlay (src/index.html) is removed event-driven only once AppComponent.dsAppHasRenderedContent() finds dsApp.querySelector('#main-content') !== null (app.component.ts:197).

TUL's root.component.html:8 rendered <main class="main-content"> without id="main-content" — TUL's template predates the upstream skip-to-main-content commit that added the id (which zcu-pub/vsb-tuo carry as <main class="my-cs" id="main-content">). So:

1. The DOM-settle filter never passes → the event-driven reveal branch is unreachable.
2. race(settled$, timer(ssrOverlaySettleMaxMs=10000)) always resolves via the 10 s cap → the overlay is removed 10 s after the auth/theme gate opens, on every reload.
3. During that window the opaque snapshot masks the live app; the overlay is pointer-events:none, so clicks pass through and navigate invisibly while the visible page never updates → perceived "page not responding".

Why tests didn't catch it: app.component.spec.ts fabricates its own <ds-app> containing <main id="main-content">, so the overlay unit tests passed on TUL despite the real template lacking the id.

Empirical confirmation (Playwright, pre-fix, live dev-5): overlay removed at 14.6 s after navigation start (gate-open + 10 s cap), hasMainContent: false, and a click during the mask changed the URL to /community-list while the overlay stayed up → visibleResponse: false.

Fix

Add id="main-content" to <main> in src/app/root/root.component.html — matching zcu-pub/vsb-tuo and the selector AppComponent already expects. The custom theme reuses this base template (themes/custom/app/root/root.component.ts), so one edit covers all themes.

app.component.ts is left byte-identical to the other customer branches (no local selector hardening) to keep future overlay backports clean, per reviewer consensus.

Adds a root.component.spec.ts regression test that renders the real root template and asserts main#main-content exists — this fails on pre-fix TUL and prevents a silent re-drop in future merges.

Analysis

Verified by a 4-way analyst panel (root-cause / divergence-sweep / UX / fix-critic): the missing id is the only overlay-affecting divergence vs. the working branches (no carousels or sub-600 ms DOM churn on TUL's home/admin pages that could defeat the settle window; #1354 gutter backport is complete; auth/theme gate behaves like ZCU). Fix verdict: APPROVE.

Manual Testing

• Anonymous /home hard reload — overlay lifts event-driven, no 10 s freeze
• Admin login + hard reload while logged in — overlay lifts, no gutter jump, page interactive

Copilot review

• Requested review from Copilot

[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: 8839038c-2c6d-47db-a86e-b5fced55b0e2

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

---

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.}