From ab7de13dda29d802ffad0b58c492c8849c4b0e91 Mon Sep 17 00:00:00 2001
From: milanmajchrak <minptai7@gmail.com>
Date: Wed, 8 Jul 2026 09:53:45 +0200
Subject: [PATCH] TUL/Fix SSR overlay never revealing: add id="main-content" on
 <main>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The SSR anti-flicker overlay (src/index.html) is removed event-driven only
once AppComponent.dsAppHasRenderedContent() finds dsApp.querySelector(
'#main-content') (src/app/app.component.ts:197). TUL's root template rendered
<main class="main-content"> WITHOUT that id (it predates the upstream
skip-to-main-content commit that other branches carry, so backport #1310
shipped a selector precondition this template never satisfied). The
event-driven reveal could therefore never fire, and the overlay was removed
only by the 10s settle cap (ssrOverlaySettleMaxMs) on EVERY hard reload:
during that window the opaque snapshot masks the live app while clicks pass
through (pointer-events:none) and navigate invisibly -> the page looks frozen
and "does not respond after reload".

Fix: add id="main-content" to <main>, 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 backports clean.

Adds a root.component.spec regression test that renders the real template and
asserts #main-content exists — app.component.spec fabricated its own <ds-app>
with the id, which masked this divergence from the unit suite.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app/root/root.component.html    | 2 +-
 src/app/root/root.component.spec.ts | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index 572be9e7cbf..1ac18a7db33 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -5,7 +5,7 @@
   <div class="inner-wrapper">
     <ds-system-wide-alert-banner></ds-system-wide-alert-banner>
     <ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper>
-    <main class="main-content">
+    <main class="main-content" id="main-content">
       <ds-themed-breadcrumbs></ds-themed-breadcrumbs>
 
       <div class="container d-flex justify-content-center align-items-center h-100" *ngIf="shouldShowRouteLoader">
diff --git a/src/app/root/root.component.spec.ts b/src/app/root/root.component.spec.ts
index ab148b8ebd3..9cef43c77cf 100644
--- a/src/app/root/root.component.spec.ts
+++ b/src/app/root/root.component.spec.ts
@@ -74,4 +74,13 @@ describe('RootComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  // The SSR anti-flicker overlay (src/index.html) is removed event-driven only once
+  // AppComponent.dsAppHasRenderedContent() sees dsApp.querySelector('#main-content') (see
+  // src/app/app.component.ts). If the root template ever drops this id again (as it silently did
+  // on TUL, leaving the overlay to be removed only by the 10s settle cap on every hard reload -> a
+  // frozen, "unresponsive" page), this test fails instead of the regression reaching production.
+  it('renders the #main-content landmark required by the SSR overlay reveal', () => {
+    expect(fixture.nativeElement.querySelector('main#main-content')).not.toBeNull();
+  });
 });