From fa485f7f66c5c38130c89709922e529c91da28f7 Mon Sep 17 00:00:00 2001
From: Juraj Roka <95219754+jr-rk@users.noreply.github.com>
Date: Wed, 17 Jun 2026 08:14:10 +0200
Subject: [PATCH 1/5] AI backport of Fix home-page SSR->CSR flicker

---
 angular.json                      |   4 +-
 src/app/app.component.spec.ts     |  63 +++++++++++++++-
 src/app/app.component.ts          |  40 +++++++++-
 src/index.html                    | 119 ++++++++++++++++++++++++++++++
 src/themes/eager-themes.module.ts |   9 ++-
 src/typings.d.ts                  |   9 +++
 6 files changed, 237 insertions(+), 7 deletions(-)

diff --git a/angular.json b/angular.json
index d828887b214..386644ac725 100644
--- a/angular.json
+++ b/angular.json
@@ -100,8 +100,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "3mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "5.5mb",
+                  "maximumError": "6mb"
                 },
                 {
                   "type": "anyComponentStyle",
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index e921c67acea..9294f1ff1dd 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,9 +1,10 @@
 import { Store, StoreModule } from '@ngrx/store';
-import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { ApplicationRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { BehaviorSubject } from 'rxjs';
 
 // Load the implementations that should be tested
 import { AppComponent } from './app.component';
@@ -127,4 +128,62 @@ describe('App component', () => {
     });
 
   });
+
+  describe('removeSsrOverlayWhenStable', () => {
+    // The inline bootstrap script in src/index.html injects window.__dspaceRemoveSsrOverlay
+    // and AppComponent must call it exactly once when ApplicationRef.isStable first emits true.
+    let appRef: ApplicationRef;
+    let isStable$: BehaviorSubject<boolean>;
+    let originalRaF: typeof window.requestAnimationFrame;
+
+    beforeEach(() => {
+      appRef = TestBed.inject(ApplicationRef);
+      isStable$ = new BehaviorSubject<boolean>(false);
+      // Patch isStable to our controllable subject for this test only
+      Object.defineProperty(appRef, 'isStable', { value: isStable$.asObservable() });
+
+      // Force rAF to a synchronous shim so we can flush() through the chain deterministically.
+      originalRaF = window.requestAnimationFrame;
+      (window as any).requestAnimationFrame = (cb: FrameRequestCallback) => {
+        cb(0);
+        return 0 as any;
+      };
+    });
+
+    afterEach(() => {
+      (window as any).requestAnimationFrame = originalRaF;
+      delete (window as any).__dspaceRemoveSsrOverlay;
+    });
+
+    it('removes the overlay once isStable emits true', fakeAsync(() => {
+      const spy = jasmine.createSpy('__dspaceRemoveSsrOverlay');
+      window.__dspaceRemoveSsrOverlay = spy;
+
+      // Re-construct so the constructor-time subscription picks up our patched isStable + global.
+      const f = TestBed.createComponent(AppComponent);
+      f.detectChanges();
+
+      expect(spy).not.toHaveBeenCalled();
+
+      isStable$.next(true);
+      tick(50); // matches the 50ms pad after rAF in removeSsrOverlayWhenStable
+      flush();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    }));
+
+    it('is a no-op when the global is not injected (e.g. CSR-only route, SSR skipped)', fakeAsync(() => {
+      // Global intentionally absent; constructor should not throw and should not break later.
+      delete (window as any).__dspaceRemoveSsrOverlay;
+
+      const f = TestBed.createComponent(AppComponent);
+      expect(() => f.detectChanges()).not.toThrow();
+
+      isStable$.next(true);
+      tick(50);
+      flush();
+
+      expect(window.__dspaceRemoveSsrOverlay).toBeUndefined();
+    }));
+  });
 });
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ba7b7382278..588481e93fe 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,11 +1,13 @@
-import { distinctUntilChanged, take, withLatestFrom } from 'rxjs/operators';
+import { distinctUntilChanged, filter, first, take, withLatestFrom } from 'rxjs/operators';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
   AfterViewInit,
+  ApplicationRef,
   ChangeDetectionStrategy,
   Component,
   HostListener,
   Inject,
+  NgZone,
   OnInit,
   PLATFORM_ID,
 } from '@angular/core';
@@ -74,6 +76,8 @@ export class AppComponent implements OnInit, AfterViewInit {
     private cssService: CSSVariableService,
     private modalService: NgbModal,
     private modalConfig: NgbModalConfig,
+    private appRef: ApplicationRef,
+    private ngZone: NgZone,
   ) {
     this.notificationOptions = environment.notifications;
 
@@ -82,6 +86,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 
     if (isPlatformBrowser(this.platformId)) {
       this.trackIdleModal();
+      this.removeSsrOverlayWhenStable();
     }
 
     this.isThemeLoading$ = this.themeService.isThemeLoading$;
@@ -89,6 +94,39 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.storeCSSVariables();
   }
 
+  /**
+   * Drops the SSR mask overlay installed by the inline bootstrap script in src/index.html as soon
+   * as Angular reaches its first stable state. The overlay is the only thing the user sees while
+   * Angular 15 rebuilds the SSR DOM; removing it too early would expose the rebuild flicker, too
+   * late would feel sluggish. We add a short safety pad to let the first paint settle, and there
+   * is also a 15s hard fallback inside the script itself in case isStable never fires.
+   */
+  private removeSsrOverlayWhenStable(): void {
+    const w: Window | undefined = this._window?.nativeWindow;
+    if (!w || typeof w.__dspaceRemoveSsrOverlay !== 'function') {
+      return;
+    }
+    // run outside Angular so we don't keep changeDetection ticking on the overlay timer
+    this.ngZone.runOutsideAngular(() => {
+      this.appRef.isStable.pipe(
+        filter((stable: boolean) => stable),
+        first(),
+      ).subscribe(() => {
+        // one rAF + small pad to let the first stable paint commit before fading the overlay
+        const remove = () => {
+          if (typeof w.__dspaceRemoveSsrOverlay === 'function') {
+            w.__dspaceRemoveSsrOverlay();
+          }
+        };
+        if (typeof w.requestAnimationFrame === 'function') {
+          w.requestAnimationFrame(() => setTimeout(remove, 50));
+        } else {
+          setTimeout(remove, 50);
+        }
+      });
+    });
+  }
+
   ngOnInit() {
     /** Implement behavior for interface {@link ModalBeforeDismiss} */
     this.modalConfig.beforeDismiss = async function () {
diff --git a/src/index.html b/src/index.html
index 74fc0c9861b..14a782b7f5e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,12 +7,131 @@
   <title>DSpace</title>
   <meta name="viewport" content="width=device-width,minimum-scale=1">
   <meta http-equiv="cache-control" content="no-store">
+  <style id="__dspace-ssr-overlay-style">
+    /* Overlay used to mask the Angular 15 bootstrap re-render of the SSR DOM.
+       See src/index.html bootstrap script + AppComponent.removeSsrOverlayWhenStable.
+       The overlay element holds the SSR-rendered children moved out of <ds-app>,
+       so it keeps every original Angular view-encapsulation attribute (_ngcontent-scXXX),
+       inline style, and lifecycle context — i.e. it looks pixel-identical to what SSR sent. */
+    #__dspace_ssr_overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      z-index: 10000;
+      background: #fff;
+      pointer-events: none;
+    }
+    /* Keep <ds-app> taking layout space (height of CSR result) but hidden, so the page
+       does not collapse the moment we drop the overlay. */
+    ds-app[data-dspace-ssr-hidden] { visibility: hidden; }
+  </style>
 </head>
 <body>
 <!-- dependencies -->
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
   <ds-app></ds-app>
+<script>
+/*
+  Anti-flicker overlay.
+  Why this exists: this codebase is on Angular 15 + ngUniversal. There is no provideClientHydration
+  available before Angular 16, so on every browser load Angular tears down the entire SSR DOM and
+  re-renders the component tree from scratch. The rebuild takes ~600-1500 ms on slow connections,
+  during which the user sees the SSR view -> blank/half-built CSR view -> final CSR view.
+  This script captures the SSR DOM as a non-interactive snapshot the moment it's parsed (before
+  any module/main script runs - those are type=module and therefore deferred). While Angular
+  rebuilds the real <ds-app> invisibly, the snapshot keeps the page looking stable. AppComponent
+  removes the overlay once ApplicationRef.isStable settles.
+*/
+(function () {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return;
+  // Skip when Cypress is driving the page. The overlay duplicates SSR DOM (moved into the
+  // overlay) alongside the CSR DOM (rendered into <ds-app>) during the masking window — so
+  // any cy.get('#some-id').click() picks up two elements and fails. The overlay is a pure
+  // UX nicety, and Cypress E2E doesn't measure visual smoothness anyway; bail early.
+  if (typeof window.Cypress !== 'undefined') return;
+  try {
+    var app = document.querySelector('ds-app');
+    // If SSR was skipped for this route (excludePathPatterns), there are no children; nothing to mask.
+    if (!app || !app.firstElementChild) return;
+    if (document.getElementById('__dspace_ssr_overlay')) return;
+
+    // Critical: Angular's BrowserModule.withServerTransition removes ALL <style ng-transition="...">
+    // tags during bootstrap. Those tags hold the component-scoped CSS that styles the SSR DOM
+    // via attribute selectors like [_ngcontent-scXXX]. If we don't preserve copies, the overlay
+    // renders unstyled. Clone the SSR styles into <style data-dspace-ssr-keep> tags that Angular
+    // ignores, so the overlay keeps looking like the page the user already saw.
+    var ssrStyles = document.querySelectorAll('style[ng-transition]');
+    var keptStyles = [];
+    for (var i = 0; i < ssrStyles.length; i++) {
+      var copy = document.createElement('style');
+      copy.setAttribute('data-dspace-ssr-keep', '');
+      copy.textContent = ssrStyles[i].textContent;
+      document.head.appendChild(copy);
+      keptStyles.push(copy);
+    }
+
+    // Build overlay and MOVE (not clone) the SSR children into it. Moving keeps every live DOM
+    // detail (Angular's view-encapsulation attributes, computed inline styles, image-load state)
+    // so the overlay is pixel-identical to what the user already saw before Angular booted.
+    // Cloning via innerHTML loses parent-context-dependent rendering.
+    //
+    // Accessibility note: we deliberately do NOT set aria-hidden on the overlay. The overlay
+    // *is* the visible page during the masking window, so assistive technologies should read
+    // it. The original <ds-app> underneath gets visibility:hidden (via attribute + CSS rule),
+    // which removes both itself and its children from the accessibility tree.
+    var overlay = document.createElement('div');
+    overlay.id = '__dspace_ssr_overlay';
+    while (app.firstChild) {
+      overlay.appendChild(app.firstChild);
+    }
+
+    // Hide the now-empty <ds-app> so Angular can rebuild into it invisibly. We use an attribute
+    // (CSS in <head> targets it) rather than setting .style.visibility directly so Angular's
+    // template doesn't blow it away on first ChangeDetection.
+    app.setAttribute('data-dspace-ssr-hidden', '');
+    document.body.appendChild(overlay);
+
+    var removing = false;
+    window.__dspaceRemoveSsrOverlay = function () {
+      // Re-entrancy guard: null the pointer up-front so a racing isStable + 15s safety
+      // fallback cannot start two interleaving fade-out passes (which would re-remove
+      // the kept styles from underneath the first pass).
+      if (removing) return;
+      removing = true;
+      window.__dspaceRemoveSsrOverlay = null;
+
+      var el = document.getElementById('__dspace_ssr_overlay');
+      if (!el) return;
+      app.removeAttribute('data-dspace-ssr-hidden');
+      el.style.transition = 'opacity 150ms ease-out';
+      el.style.opacity = '0';
+      setTimeout(function () {
+        if (el && el.parentNode) el.parentNode.removeChild(el);
+        for (var i = 0; i < keptStyles.length; i++) {
+          if (keptStyles[i].parentNode) keptStyles[i].parentNode.removeChild(keptStyles[i]);
+        }
+        keptStyles = [];
+      }, 200);
+    };
+
+    // Safety net: if the app never reaches isStable (e.g. permanent HTTP poll), remove anyway.
+    setTimeout(function () {
+      if (typeof window.__dspaceRemoveSsrOverlay === 'function') {
+        window.__dspaceRemoveSsrOverlay();
+      }
+    }, 15000);
+  } catch (e) {
+    // Don't let the overlay logic kill the page, but surface the failure so a silently-broken
+    // flicker fix is at least diagnosable in DevTools.
+    if (window.console && typeof console.warn === 'function') {
+      console.warn('[dspace-ssr-overlay] disabled due to error:', e);
+    }
+  }
+})();
+</script>
 </body>
 
 <!-- do not include client bundle, it is injected with Zone already loaded -->
diff --git a/src/themes/eager-themes.module.ts b/src/themes/eager-themes.module.ts
index 4a46595f358..29d46032de8 100644
--- a/src/themes/eager-themes.module.ts
+++ b/src/themes/eager-themes.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { EagerThemeModule as DSpaceEagerThemeModule } from './dspace/eager-theme.module';
-// import { EagerThemeModule as CustomEagerThemeModule } from './custom/eager-theme.module';
+import { EagerThemeModule as CustomEagerThemeModule } from './custom/eager-theme.module';
 
 /**
  * This module bundles the eager theme modules for all available themes.
@@ -8,11 +8,16 @@ import { EagerThemeModule as DSpaceEagerThemeModule } from './dspace/eager-theme
  * and entry components (to ensure their decorators get picked up).
  *
  * Themes that aren't in use should not be imported here so they don't take up unnecessary space in the main bundle.
+ *
+ * NOTE: CustomEagerThemeModule is included to prevent the home-page flicker that occurs when
+ * the active theme is `custom`. Without it, every themed wrapper (footer, header, root, ...) is
+ * lazy-loaded via webpack code-splitting on the browser, leaving visible gaps after the SSR DOM
+ * is torn down and before the CSR DOM is materialised.
  */
 @NgModule({
   imports: [
     DSpaceEagerThemeModule,
-    // CustomEagerThemeModule,
+    CustomEagerThemeModule,
   ],
 })
 export class EagerThemesModule {
diff --git a/src/typings.d.ts b/src/typings.d.ts
index c1c86511f88..f7397dc290e 100644
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -86,3 +86,12 @@ declare module '*.scss' {
   const content: any;
   export default content;
 }
+
+/**
+ * Window global injected by the inline anti-flicker bootstrap script in `src/index.html`.
+ * Called once by `AppComponent.removeSsrOverlayWhenStable()` when `ApplicationRef.isStable`
+ * fires, to drop the SSR-mask overlay and let the freshly built CSR DOM become visible.
+ */
+interface Window {
+  __dspaceRemoveSsrOverlay?: (() => void) | null;
+}

From 87dc1aa39a18e43f1660f1a93070cbad1d12366f Mon Sep 17 00:00:00 2001
From: Juraj Roka <95219754+jr-rk@users.noreply.github.com>
Date: Thu, 18 Jun 2026 11:03:56 +0200
Subject: [PATCH 2/5] Fix: always unhide app when removing SSR anti-flicker
 overlay

The overlay remover bailed out via `if (!el) return;` before unhiding
<ds-app>, so if the overlay node went missing (browser extension, race,
external script) the app stayed visibility:hidden forever -> blank page,
plus the kept SSR styles leaked. Unhide the app and clean up the kept
styles unconditionally, before checking for the overlay node.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/index.html | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/index.html b/src/index.html
index 14a782b7f5e..95d5d6c0c2c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -103,17 +103,28 @@
       removing = true;
       window.__dspaceRemoveSsrOverlay = null;
 
-      var el = document.getElementById('__dspace_ssr_overlay');
-      if (!el) return;
+      // Always unhide the real <ds-app> and drop the kept SSR styles first, even if the
+      // overlay node has gone missing (e.g. removed by an extension or another script).
+      // A bare early return here would otherwise leave the app permanently hidden.
       app.removeAttribute('data-dspace-ssr-hidden');
-      el.style.transition = 'opacity 150ms ease-out';
-      el.style.opacity = '0';
-      setTimeout(function () {
-        if (el && el.parentNode) el.parentNode.removeChild(el);
+
+      var removeKeptStyles = function () {
         for (var i = 0; i < keptStyles.length; i++) {
           if (keptStyles[i].parentNode) keptStyles[i].parentNode.removeChild(keptStyles[i]);
         }
         keptStyles = [];
+      };
+
+      var el = document.getElementById('__dspace_ssr_overlay');
+      if (!el) {
+        removeKeptStyles();
+        return;
+      }
+      el.style.transition = 'opacity 150ms ease-out';
+      el.style.opacity = '0';
+      setTimeout(function () {
+        if (el && el.parentNode) el.parentNode.removeChild(el);
+        removeKeptStyles();
       }, 200);
     };
 

From 6f8b480af0bd07171c157525f4f45713936f1ca9 Mon Sep 17 00:00:00 2001
From: Juraj Roka <95219754+jr-rk@users.noreply.github.com>
Date: Thu, 18 Jun 2026 16:49:44 +0200
Subject: [PATCH 3/5] Test: isolate isStable override and cover the no-rAF
 overlay path

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>
---
 src/app/app.component.spec.ts | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 9294f1ff1dd..2228d58c39e 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -135,12 +135,16 @@ describe('App component', () => {
     let appRef: ApplicationRef;
     let isStable$: BehaviorSubject<boolean>;
     let originalRaF: typeof window.requestAnimationFrame;
+    let originalIsStable: PropertyDescriptor | undefined;
 
     beforeEach(() => {
       appRef = TestBed.inject(ApplicationRef);
       isStable$ = new BehaviorSubject<boolean>(false);
-      // Patch isStable to our controllable subject for this test only
-      Object.defineProperty(appRef, 'isStable', { value: isStable$.asObservable() });
+      // Patch isStable to our controllable subject for this test only. Keep it configurable and
+      // remember the previous descriptor so afterEach can restore it - otherwise the override
+      // leaks onto the shared TestBed ApplicationRef instance and into later specs.
+      originalIsStable = Object.getOwnPropertyDescriptor(appRef, 'isStable');
+      Object.defineProperty(appRef, 'isStable', { value: isStable$.asObservable(), configurable: true });
 
       // Force rAF to a synchronous shim so we can flush() through the chain deterministically.
       originalRaF = window.requestAnimationFrame;
@@ -153,6 +157,12 @@ describe('App component', () => {
     afterEach(() => {
       (window as any).requestAnimationFrame = originalRaF;
       delete (window as any).__dspaceRemoveSsrOverlay;
+      // Restore isStable so the patched observable cannot leak into later specs.
+      if (originalIsStable) {
+        Object.defineProperty(appRef, 'isStable', originalIsStable);
+      } else {
+        delete (appRef as any).isStable;
+      }
     });
 
     it('removes the overlay once isStable emits true', fakeAsync(() => {
@@ -185,5 +195,21 @@ describe('App component', () => {
 
       expect(window.__dspaceRemoveSsrOverlay).toBeUndefined();
     }));
+
+    it('still removes the overlay when requestAnimationFrame is unavailable', fakeAsync(() => {
+      // Exercises the fallback scheduler branch in removeSsrOverlayWhenStable.
+      const spy = jasmine.createSpy('__dspaceRemoveSsrOverlay');
+      window.__dspaceRemoveSsrOverlay = spy;
+      (window as any).requestAnimationFrame = undefined;
+
+      const f = TestBed.createComponent(AppComponent);
+      f.detectChanges();
+
+      isStable$.next(true);
+      tick(50);
+      flush();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    }));
   });
 });

From f81cb56fbc3c2058a12dbd5945e4713719f74fcc Mon Sep 17 00:00:00 2001
From: Juraj Roka <95219754+jr-rk@users.noreply.github.com>
Date: Sat, 20 Jun 2026 13:39:33 +0200
Subject: [PATCH 4/5] Refactor: remove SSR overlay on content-visible instead
 of isStable

Propagates VSB-TUO's fix #1317 to this instance. The overlay was removed when
ApplicationRef.isStable settled, but isStable can be delayed for seconds by
post-login admin zone activity (auth work, background polling, third-party
scripts) - during which the live app stays hidden under the SSR mask and the
page renders but is non-interactive (dataquest-dev/dspace-customers#725).

Switch removal to the same condition root.component.html uses to show real
content: !isAuthenticationBlocking && !isThemeLoading. Drop the now-unused
ApplicationRef injection and the 50ms pad; keep the 15s hard fallback as a
catastrophic safety net. Tests and the theme-service mock updated to match.

Ref: #1317

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/app.component.spec.ts              | 72 ++++++++--------------
 src/app/app.component.ts                   | 35 ++++++-----
 src/app/shared/mocks/theme-service.mock.ts |  7 +++
 src/index.html                             |  8 ++-
 4 files changed, 56 insertions(+), 66 deletions(-)

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 2228d58c39e..79db5691437 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,6 +1,6 @@
 import { Store, StoreModule } from '@ngrx/store';
-import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
-import { ApplicationRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, inject, TestBed, waitForAsync } from '@angular/core/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
@@ -31,7 +31,7 @@ import { Angulartics2DSpace } from './statistics/angulartics/dspace-provider';
 import { storeModuleConfig } from './app.reducer';
 import { LocaleService } from './core/locale/locale.service';
 import { authReducer } from './core/auth/auth.reducer';
-import { provideMockStore } from '@ngrx/store/testing';
+import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { ThemeService } from './shared/theme-support/theme.service';
 import { getMockThemeService } from './shared/mocks/theme-service.mock';
 import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
@@ -42,7 +42,7 @@ let comp: AppComponent;
 let fixture: ComponentFixture<AppComponent>;
 const menuService = new MenuServiceStub();
 const initialState = {
-  core: { auth: { loading: false } }
+  core: { auth: { loading: false, blocking: false } }
 };
 
 export function getMockLocaleService(): LocaleService {
@@ -129,24 +129,22 @@ describe('App component', () => {
 
   });
 
-  describe('removeSsrOverlayWhenStable', () => {
-    // The inline bootstrap script in src/index.html injects window.__dspaceRemoveSsrOverlay
-    // and AppComponent must call it exactly once when ApplicationRef.isStable first emits true.
-    let appRef: ApplicationRef;
-    let isStable$: BehaviorSubject<boolean>;
+  describe('removeSsrOverlayWhenContentVisible', () => {
+    // The inline bootstrap script in src/index.html injects window.__dspaceRemoveSsrOverlay.
+    // AppComponent should remove it once both auth blocking and theme loading are false.
+    let mockStore: MockStore;
+    let themeLoading$: BehaviorSubject<boolean>;
+    let themeService: ThemeService;
     let originalRaF: typeof window.requestAnimationFrame;
-    let originalIsStable: PropertyDescriptor | undefined;
 
     beforeEach(() => {
-      appRef = TestBed.inject(ApplicationRef);
-      isStable$ = new BehaviorSubject<boolean>(false);
-      // Patch isStable to our controllable subject for this test only. Keep it configurable and
-      // remember the previous descriptor so afterEach can restore it - otherwise the override
-      // leaks onto the shared TestBed ApplicationRef instance and into later specs.
-      originalIsStable = Object.getOwnPropertyDescriptor(appRef, 'isStable');
-      Object.defineProperty(appRef, 'isStable', { value: isStable$.asObservable(), configurable: true });
-
-      // Force rAF to a synchronous shim so we can flush() through the chain deterministically.
+      mockStore = TestBed.inject(MockStore);
+      themeService = TestBed.inject(ThemeService);
+      themeLoading$ = new BehaviorSubject<boolean>(true);
+      (themeService as any).isThemeLoading$ = themeLoading$.asObservable();
+      mockStore.setState({ core: { auth: { loading: false, blocking: true } } });
+
+      // Force rAF to a synchronous shim so assertions are deterministic.
       originalRaF = window.requestAnimationFrame;
       (window as any).requestAnimationFrame = (cb: FrameRequestCallback) => {
         cb(0);
@@ -157,29 +155,24 @@ describe('App component', () => {
     afterEach(() => {
       (window as any).requestAnimationFrame = originalRaF;
       delete (window as any).__dspaceRemoveSsrOverlay;
-      // Restore isStable so the patched observable cannot leak into later specs.
-      if (originalIsStable) {
-        Object.defineProperty(appRef, 'isStable', originalIsStable);
-      } else {
-        delete (appRef as any).isStable;
-      }
     });
 
-    it('removes the overlay once isStable emits true', fakeAsync(() => {
+    it('removes the overlay once auth is unblocked and theme loading is finished', fakeAsync(() => {
       const spy = jasmine.createSpy('__dspaceRemoveSsrOverlay');
       window.__dspaceRemoveSsrOverlay = spy;
 
-      // Re-construct so the constructor-time subscription picks up our patched isStable + global.
+      // Re-construct so constructor-time subscription picks up our patched streams + global.
       const f = TestBed.createComponent(AppComponent);
       f.detectChanges();
 
       expect(spy).not.toHaveBeenCalled();
 
-      isStable$.next(true);
-      tick(50); // matches the 50ms pad after rAF in removeSsrOverlayWhenStable
+      mockStore.setState({ core: { auth: { loading: false, blocking: false } } });
+      themeLoading$.next(false);
       flush();
 
       expect(spy).toHaveBeenCalledTimes(1);
+      discardPeriodicTasks();
     }));
 
     it('is a no-op when the global is not injected (e.g. CSR-only route, SSR skipped)', fakeAsync(() => {
@@ -189,27 +182,12 @@ describe('App component', () => {
       const f = TestBed.createComponent(AppComponent);
       expect(() => f.detectChanges()).not.toThrow();
 
-      isStable$.next(true);
-      tick(50);
+      mockStore.setState({ core: { auth: { loading: false, blocking: false } } });
+      themeLoading$.next(false);
       flush();
 
       expect(window.__dspaceRemoveSsrOverlay).toBeUndefined();
-    }));
-
-    it('still removes the overlay when requestAnimationFrame is unavailable', fakeAsync(() => {
-      // Exercises the fallback scheduler branch in removeSsrOverlayWhenStable.
-      const spy = jasmine.createSpy('__dspaceRemoveSsrOverlay');
-      window.__dspaceRemoveSsrOverlay = spy;
-      (window as any).requestAnimationFrame = undefined;
-
-      const f = TestBed.createComponent(AppComponent);
-      f.detectChanges();
-
-      isStable$.next(true);
-      tick(50);
-      flush();
-
-      expect(spy).toHaveBeenCalledTimes(1);
+      discardPeriodicTasks();
     }));
   });
 });
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 588481e93fe..c5f8e21f082 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,7 +2,6 @@ import { distinctUntilChanged, filter, first, take, withLatestFrom } from 'rxjs/
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
   AfterViewInit,
-  ApplicationRef,
   ChangeDetectionStrategy,
   Component,
   HostListener,
@@ -18,7 +17,7 @@ import {
   Router,
 } from '@angular/router';
 
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { select, Store } from '@ngrx/store';
 import { NgbModal, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
@@ -76,7 +75,6 @@ export class AppComponent implements OnInit, AfterViewInit {
     private cssService: CSSVariableService,
     private modalService: NgbModal,
     private modalConfig: NgbModalConfig,
-    private appRef: ApplicationRef,
     private ngZone: NgZone,
   ) {
     this.notificationOptions = environment.notifications;
@@ -86,7 +84,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 
     if (isPlatformBrowser(this.platformId)) {
       this.trackIdleModal();
-      this.removeSsrOverlayWhenStable();
+      this.removeSsrOverlayWhenContentVisible();
     }
 
     this.isThemeLoading$ = this.themeService.isThemeLoading$;
@@ -95,33 +93,38 @@ export class AppComponent implements OnInit, AfterViewInit {
   }
 
   /**
-   * Drops the SSR mask overlay installed by the inline bootstrap script in src/index.html as soon
-   * as Angular reaches its first stable state. The overlay is the only thing the user sees while
-   * Angular 15 rebuilds the SSR DOM; removing it too early would expose the rebuild flicker, too
-   * late would feel sluggish. We add a short safety pad to let the first paint settle, and there
-   * is also a 15s hard fallback inside the script itself in case isStable never fires.
+   * Drops the SSR mask overlay installed by the inline bootstrap script in src/index.html the
+   * moment the real CSR content is actually visible. We do NOT wait for ApplicationRef.isStable
+   * (which can be delayed many seconds by ongoing zone tasks, e.g. admin-only background HTTP
+   * polling, periodic timers, third-party AAI/discojuice scripts). Instead we react to the same
+   * condition root.component.html uses to swap the fullscreen loader for the real content:
+   * `!isAuthenticationBlocking && !isThemeLoading`. At that exact point the routed page is
+   * rendered, so removing the SSR snapshot does not produce flicker. One rAF delay lets the
+   * change-detection result commit to the DOM before the overlay fades.
    */
-  private removeSsrOverlayWhenStable(): void {
+  private removeSsrOverlayWhenContentVisible(): void {
     const w: Window | undefined = this._window?.nativeWindow;
     if (!w || typeof w.__dspaceRemoveSsrOverlay !== 'function') {
       return;
     }
-    // run outside Angular so we don't keep changeDetection ticking on the overlay timer
+    // run outside Angular so the subscription does not keep change detection alive
     this.ngZone.runOutsideAngular(() => {
-      this.appRef.isStable.pipe(
-        filter((stable: boolean) => stable),
+      combineLatest([
+        this.store.pipe(select(isAuthenticationBlocking), distinctUntilChanged()),
+        this.themeService.isThemeLoading$,
+      ]).pipe(
+        filter(([blocking, themeLoading]: [boolean, boolean]) => !blocking && !themeLoading),
         first(),
       ).subscribe(() => {
-        // one rAF + small pad to let the first stable paint commit before fading the overlay
         const remove = () => {
           if (typeof w.__dspaceRemoveSsrOverlay === 'function') {
             w.__dspaceRemoveSsrOverlay();
           }
         };
         if (typeof w.requestAnimationFrame === 'function') {
-          w.requestAnimationFrame(() => setTimeout(remove, 50));
+          w.requestAnimationFrame(remove);
         } else {
-          setTimeout(remove, 50);
+          remove();
         }
       });
     });
diff --git a/src/app/shared/mocks/theme-service.mock.ts b/src/app/shared/mocks/theme-service.mock.ts
index e3c2960e51f..095e8ec6007 100644
--- a/src/app/shared/mocks/theme-service.mock.ts
+++ b/src/app/shared/mocks/theme-service.mock.ts
@@ -4,11 +4,18 @@ import { ThemeConfig } from '../../../config/theme.model';
 import { isNotEmpty } from '../empty.util';
 
 export function getMockThemeService(themeName = 'base', themes?: ThemeConfig[]): ThemeService {
+  // getThemeName$ is a real method on ThemeService (called as getThemeName$()),
+  // so it must stay a spy method that returns an Observable.
+  // isThemeLoading$ is a real property getter on ThemeService, so it must be a
+  // property on the mock - not a spy method - or AsyncPipe / combineLatest will
+  // receive a function instead of a stream.
   const spy = jasmine.createSpyObj('themeService', {
     getThemeName: themeName,
     getThemeName$: observableOf(themeName),
     getThemeConfigFor: undefined,
     listenForRouteChanges: undefined,
+  }, {
+    isThemeLoading$: observableOf(false),
   });
 
   if (isNotEmpty(themes)) {
diff --git a/src/index.html b/src/index.html
index 95d5d6c0c2c..1f92c0a32d7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,7 +9,7 @@
   <meta http-equiv="cache-control" content="no-store">
   <style id="__dspace-ssr-overlay-style">
     /* Overlay used to mask the Angular 15 bootstrap re-render of the SSR DOM.
-       See src/index.html bootstrap script + AppComponent.removeSsrOverlayWhenStable.
+       See src/index.html bootstrap script + AppComponent.removeSsrOverlayWhenContentVisible.
        The overlay element holds the SSR-rendered children moved out of <ds-app>,
        so it keeps every original Angular view-encapsulation attribute (_ngcontent-scXXX),
        inline style, and lifecycle context — i.e. it looks pixel-identical to what SSR sent. */
@@ -43,7 +43,7 @@
   This script captures the SSR DOM as a non-interactive snapshot the moment it's parsed (before
   any module/main script runs - those are type=module and therefore deferred). While Angular
   rebuilds the real <ds-app> invisibly, the snapshot keeps the page looking stable. AppComponent
-  removes the overlay once ApplicationRef.isStable settles.
+  removes the overlay once the real CSR content becomes visible.
 */
 (function () {
   if (typeof window === 'undefined' || typeof document === 'undefined') return;
@@ -128,7 +128,9 @@
       }, 200);
     };
 
-    // Safety net: if the app never reaches isStable (e.g. permanent HTTP poll), remove anyway.
+    // Hard safety net: only fires on catastrophic JS errors that prevent AppComponent from
+    // running its overlay-removal logic. Under normal operation the overlay is removed
+    // event-driven (no timeout) the moment the real CSR content becomes visible.
     setTimeout(function () {
       if (typeof window.__dspaceRemoveSsrOverlay === 'function') {
         window.__dspaceRemoveSsrOverlay();

From 5a8423525e76b106da7dde5035e51263f7fc8875 Mon Sep 17 00:00:00 2001
From: Juraj Roka <95219754+jr-rk@users.noreply.github.com>
Date: Tue, 30 Jun 2026 15:07:36 +0200
Subject: [PATCH 5/5] Backport final SSR-overlay mechanism from VSB-TUO (#1318,
 #1321)

Supersedes the #1317 content-visible trigger backported earlier. That gate
(!isAuthenticationBlocking && !isThemeLoading) still revealed a half-built page
on hard reload, so VSB-TUO's #1318/#1321 keep the snapshot until the routed
<ds-app> DOM has SETTLED (MutationObserver + quiet window, with a content
height / #main-content check and a 10s cap). The overlay is now a purely
visual mask, so the live app stays interactive underneath while it rebuilds
(closes dspace-customers#725 - "looks rendered but not clickable").

index.html, app.component.ts, spec and typings are synced to VSB-TUO's final
version; the VSB-only ngAfterViewInit delay(0) is omitted (these instances
don't carry it).

Ref: #1318, #1321

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/app.component.spec.ts |  22 +++--
 src/app/app.component.ts      | 150 +++++++++++++++++++++++++++-------
 src/index.html                |  82 ++++++++++---------
 src/typings.d.ts              |   5 +-
 4 files changed, 182 insertions(+), 77 deletions(-)

diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 79db5691437..5d18f76b806 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,5 +1,5 @@
 import { Store, StoreModule } from '@ngrx/store';
-import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, inject, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, discardPeriodicTasks, fakeAsync, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -131,11 +131,13 @@ describe('App component', () => {
 
   describe('removeSsrOverlayWhenContentVisible', () => {
     // The inline bootstrap script in src/index.html injects window.__dspaceRemoveSsrOverlay.
-    // AppComponent should remove it once both auth blocking and theme loading are false.
+    // Once auth blocking and theme loading are both false, AppComponent waits for the <ds-app> DOM
+    // to settle (no element added/removed for the quiet window) and only then removes the overlay.
     let mockStore: MockStore;
     let themeLoading$: BehaviorSubject<boolean>;
     let themeService: ThemeService;
     let originalRaF: typeof window.requestAnimationFrame;
+    let dsAppEl: HTMLElement;
 
     beforeEach(() => {
       mockStore = TestBed.inject(MockStore);
@@ -144,6 +146,12 @@ describe('App component', () => {
       (themeService as any).isThemeLoading$ = themeLoading$.asObservable();
       mockStore.setState({ core: { auth: { loading: false, blocking: true } } });
 
+      // A settled <ds-app> with real content present, so the DOM-settle watcher can resolve.
+      dsAppEl = document.createElement('ds-app');
+      dsAppEl.setAttribute('style', 'display:block;height:800px');
+      dsAppEl.innerHTML = '<main id="main-content" style="display:block;height:800px">home content</main>';
+      document.body.appendChild(dsAppEl);
+
       // Force rAF to a synchronous shim so assertions are deterministic.
       originalRaF = window.requestAnimationFrame;
       (window as any).requestAnimationFrame = (cb: FrameRequestCallback) => {
@@ -155,9 +163,10 @@ describe('App component', () => {
     afterEach(() => {
       (window as any).requestAnimationFrame = originalRaF;
       delete (window as any).__dspaceRemoveSsrOverlay;
+      if (dsAppEl && dsAppEl.parentNode) { dsAppEl.parentNode.removeChild(dsAppEl); }
     });
 
-    it('removes the overlay once auth is unblocked and theme loading is finished', fakeAsync(() => {
+    it('removes the overlay once auth/theme are ready AND the DOM has settled', fakeAsync(() => {
       const spy = jasmine.createSpy('__dspaceRemoveSsrOverlay');
       window.__dspaceRemoveSsrOverlay = spy;
 
@@ -169,9 +178,12 @@ describe('App component', () => {
 
       mockStore.setState({ core: { auth: { loading: false, blocking: false } } });
       themeLoading$.next(false);
-      flush();
 
+      // Not removed at the gate: the DOM-settle quiet window must elapse first.
+      expect(spy).not.toHaveBeenCalled();
+      tick(700); // > SETTLE_QUIET_MS
       expect(spy).toHaveBeenCalledTimes(1);
+
       discardPeriodicTasks();
     }));
 
@@ -184,7 +196,7 @@ describe('App component', () => {
 
       mockStore.setState({ core: { auth: { loading: false, blocking: false } } });
       themeLoading$.next(false);
-      flush();
+      tick(700);
 
       expect(window.__dspaceRemoveSsrOverlay).toBeUndefined();
       discardPeriodicTasks();
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c5f8e21f082..87c020aff05 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { distinctUntilChanged, filter, first, take, withLatestFrom } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, filter, startWith, switchMap, take, takeUntil, withLatestFrom } from 'rxjs/operators';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
   AfterViewInit,
@@ -7,6 +7,7 @@ import {
   HostListener,
   Inject,
   NgZone,
+  OnDestroy,
   OnInit,
   PLATFORM_ID,
 } from '@angular/core';
@@ -17,7 +18,7 @@ import {
   Router,
 } from '@angular/router';
 
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { BehaviorSubject, combineLatest, Observable, race, Subject, timer } from 'rxjs';
 import { select, Store } from '@ngrx/store';
 import { NgbModal, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
@@ -39,10 +40,22 @@ import { distinctNext } from './core/shared/distinct-next';
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent implements OnInit, AfterViewInit {
+export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   notificationOptions;
   models;
 
+  /**
+   * Emits on destroy to tear down the SSR-overlay-removal pipeline (gate subscription, the
+   * MutationObserver and its debounce/cap timers all unsubscribe via `takeUntil(destroyed$)`).
+   * AppComponent is the root component so this is mostly defensive + test hygiene.
+   */
+  private destroyed$ = new Subject<void>();
+
+  /** SSR anti-flicker overlay (see src/index.html) removal tuning. */
+  private readonly ssrOverlaySettleQuietMs = 600;      // routed page is "done" after this long with no DOM change
+  private readonly ssrOverlaySettleMaxMs = 10000;      // backstop reveal (below index.html's 15s catastrophic net)
+  private readonly ssrOverlayMinContentHeightPx = 200; // proves <ds-app> is no longer the empty shell
+
   /**
    * Whether or not the authentication is currently blocking the UI
    */
@@ -93,41 +106,118 @@ export class AppComponent implements OnInit, AfterViewInit {
   }
 
   /**
-   * Drops the SSR mask overlay installed by the inline bootstrap script in src/index.html the
-   * moment the real CSR content is actually visible. We do NOT wait for ApplicationRef.isStable
-   * (which can be delayed many seconds by ongoing zone tasks, e.g. admin-only background HTTP
-   * polling, periodic timers, third-party AAI/discojuice scripts). Instead we react to the same
-   * condition root.component.html uses to swap the fullscreen loader for the real content:
-   * `!isAuthenticationBlocking && !isThemeLoading`. At that exact point the routed page is
-   * rendered, so removing the SSR snapshot does not produce flicker. One rAF delay lets the
-   * change-detection result commit to the DOM before the overlay fades.
+   * Drops the SSR mask overlay installed by the inline bootstrap script in src/index.html once the
+   * routed CSR page has actually finished rendering. Picking the right moment is the whole problem,
+   * and the two earlier attempts each fixed one symptom and reintroduced the other:
+   *
+   *  - PR #1288 waited for `ApplicationRef.isStable`. No flicker, but isStable is held hostage by ANY
+   *    ongoing zone async — after an admin login the app keeps the zone busy (authz/widgets, periodic
+   *    polling, AAI/discojuice scripts) so isStable fires many seconds late (or hits the 15s
+   *    fallback). The inert snapshot then masks the live page -> "looks rendered but not interactive"
+   *    (issue #725).
+   *  - PR #1317 switched to the loader-swap gate `!isAuthenticationBlocking && !isThemeLoading` plus a
+   *    single requestAnimationFrame. Prompt, but that gate only un-hides `<router-outlet>`; the home
+   *    page then renders piecewise (navbar, search box, community list, recent submissions) as each
+   *    section's data arrives. Dropping the snapshot at the gate — or, as an earlier revision of this
+   *    method did, as soon as *some* content exists — exposes a half-built page that visibly pops
+   *    into place on a hard reload -> the flicker.
+   *
+   * The signal we actually need is "the routed page has stopped changing". So, after the gate opens,
+   * we keep the snapshot until the live <ds-app> DOM has SETTLED (no element added/removed for a
+   * short quiet window, with real content present). This stays decoupled from isStable (DOM-settle
+   * ignores non-rendering background async, so admin reveals in a few seconds rather than ~15s).
+   * See {@link routedPageReadyToReveal$}.
    */
   private removeSsrOverlayWhenContentVisible(): void {
-    const w: Window | undefined = this._window?.nativeWindow;
-    if (!w || typeof w.__dspaceRemoveSsrOverlay !== 'function') {
-      return;
+    const win: Window | undefined = this._window?.nativeWindow;
+    if (!win || typeof win.__dspaceRemoveSsrOverlay !== 'function') {
+      return; // SSR was skipped for this route, so no overlay was installed — nothing to remove
     }
-    // run outside Angular so the subscription does not keep change detection alive
+    // Run outside Angular: a MutationObserver watching the whole app must not trigger change
+    // detection (it would also keep ApplicationRef.isStable permanently false).
     this.ngZone.runOutsideAngular(() => {
-      combineLatest([
-        this.store.pipe(select(isAuthenticationBlocking), distinctUntilChanged()),
-        this.themeService.isThemeLoading$,
-      ]).pipe(
-        filter(([blocking, themeLoading]: [boolean, boolean]) => !blocking && !themeLoading),
-        first(),
+      this.routedPageReadyToReveal$().pipe(
+        takeUntil(this.destroyed$),
       ).subscribe(() => {
-        const remove = () => {
-          if (typeof w.__dspaceRemoveSsrOverlay === 'function') {
-            w.__dspaceRemoveSsrOverlay();
-          }
-        };
-        if (typeof w.requestAnimationFrame === 'function') {
-          w.requestAnimationFrame(remove);
-        } else {
-          remove();
+        // one frame so the freshly rendered content is painted before the snapshot fades out
+        this.runAfterNextFrame(win, () => win.__dspaceRemoveSsrOverlay?.());
+      });
+    });
+  }
+
+  /**
+   * Emits once when it is safe to drop the SSR snapshot: the auth/theme loader gate has opened
+   * (same condition root.component.html uses to swap its fullscreen loader for the routed content)
+   * AND the routed page's DOM has settled. See {@link dsAppDomSettled$}.
+   */
+  private routedPageReadyToReveal$(): Observable<unknown> {
+    const loaderGateOpen$ = combineLatest([
+      this.store.pipe(select(isAuthenticationBlocking), distinctUntilChanged()),
+      this.themeService.isThemeLoading$,
+    ]).pipe(
+      filter(([authBlocking, themeLoading]: [boolean, boolean]) => !authBlocking && !themeLoading),
+      take(1),
+    );
+    return loaderGateOpen$.pipe(
+      switchMap(() => this.dsAppDomSettled$()),
+    );
+  }
+
+  /**
+   * Emits once when the live <ds-app> subtree stops being mutated (elements added/removed) for
+   * `ssrOverlaySettleQuietMs` AND it holds real content — or after `ssrOverlaySettleMaxMs`, whichever
+   * comes first. The cap guarantees a page that never goes quiet (constant background DOM updates)
+   * still reveals; the 15s fallback in index.html remains the ultimate net.
+   */
+  private dsAppDomSettled$(): Observable<unknown> {
+    const dsApp: Element | null = this.document.querySelector('ds-app');
+    if (!dsApp) {
+      return timer(this.ssrOverlaySettleMaxMs);
+    }
+    const elementMutations$ = new Observable<void>((subscriber) => {
+      const observer = new MutationObserver((records) => {
+        if (records.some((record) => this.isElementChildListChange(record))) {
+          subscriber.next();
         }
       });
+      observer.observe(dsApp, { childList: true, subtree: true });
+      return () => observer.disconnect();
     });
+    const settled$ = elementMutations$.pipe(
+      startWith(undefined),                              // start the quiet window immediately
+      debounceTime(this.ssrOverlaySettleQuietMs),        // ... reset by each render, fires once quiet
+      filter(() => this.dsAppHasRenderedContent(dsApp)), // ... but never on the empty shell
+    );
+    return race(settled$, timer(this.ssrOverlaySettleMaxMs)).pipe(take(1));
+  }
+
+  /** True once the live <ds-app> is no longer the empty shell the overlay script left behind. */
+  private dsAppHasRenderedContent(dsApp: Element): boolean {
+    const height = dsApp.getBoundingClientRect?.().height ?? 0;
+    return height >= this.ssrOverlayMinContentHeightPx && dsApp.querySelector('#main-content') !== null;
+  }
+
+  /** A childList mutation that adds or removes at least one element node (ignores text/attr noise). */
+  private isElementChildListChange(record: MutationRecord): boolean {
+    if (record.type !== 'childList') {
+      return false;
+    }
+    const changedNodes = [...Array.from(record.addedNodes), ...Array.from(record.removedNodes)];
+    return changedNodes.some((node) => node.nodeType === Node.ELEMENT_NODE);
+  }
+
+  /** Runs `callback` after the next paint (or synchronously if requestAnimationFrame is unavailable). */
+  private runAfterNextFrame(win: Window, callback: () => void): void {
+    if (typeof win.requestAnimationFrame === 'function') {
+      win.requestAnimationFrame(() => callback());
+    } else {
+      callback();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroyed$.next();
+    this.destroyed$.complete();
   }
 
   ngOnInit() {
diff --git a/src/index.html b/src/index.html
index 1f92c0a32d7..5eb827c8d7f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,23 +9,31 @@
   <meta http-equiv="cache-control" content="no-store">
   <style id="__dspace-ssr-overlay-style">
     /* Overlay used to mask the Angular 15 bootstrap re-render of the SSR DOM.
-       See src/index.html bootstrap script + AppComponent.removeSsrOverlayWhenContentVisible.
-       The overlay element holds the SSR-rendered children moved out of <ds-app>,
-       so it keeps every original Angular view-encapsulation attribute (_ngcontent-scXXX),
-       inline style, and lifecycle context — i.e. it looks pixel-identical to what SSR sent. */
+       See src/index.html bootstrap script + AppComponent.removeSsrOverlayWhenContentVisible
+       (-> removeSsrOverlayWhenDomSettles). The overlay element holds the SSR-rendered children
+       moved out of <ds-app>, so it keeps every original Angular view-encapsulation attribute
+       (_ngcontent-scXXX), inline style, and lifecycle context — i.e. it looks pixel-identical to
+       what SSR sent.
+
+       Interactivity: the overlay is opaque (background:#fff) and on top (z-index), but
+       pointer-events:none, AND the real <ds-app> underneath is NO LONGER visibility:hidden. So the
+       overlay only MASKS the CSR rebuild visually — clicks pass straight through it to the live,
+       already-built app underneath. That is what keeps the page interactive while masked and stops
+       the masking window from reproducing issue #725 ("looks rendered but nothing is clickable").
+       min-height:100vh guarantees the opaque mask always covers the viewport so the rebuilding app
+       cannot peek through (the live <ds-app> only ever grows up to the snapshot's height while it
+       rebuilds, so it stays behind the overlay until removal). */
     #__dspace_ssr_overlay {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       width: 100%;
+      min-height: 100vh;
       z-index: 10000;
       background: #fff;
       pointer-events: none;
     }
-    /* Keep <ds-app> taking layout space (height of CSR result) but hidden, so the page
-       does not collapse the moment we drop the overlay. */
-    ds-app[data-dspace-ssr-hidden] { visibility: hidden; }
   </style>
 </head>
 <body>
@@ -40,18 +48,21 @@
   available before Angular 16, so on every browser load Angular tears down the entire SSR DOM and
   re-renders the component tree from scratch. The rebuild takes ~600-1500 ms on slow connections,
   during which the user sees the SSR view -> blank/half-built CSR view -> final CSR view.
-  This script captures the SSR DOM as a non-interactive snapshot the moment it's parsed (before
-  any module/main script runs - those are type=module and therefore deferred). While Angular
-  rebuilds the real <ds-app> invisibly, the snapshot keeps the page looking stable. AppComponent
-  removes the overlay once the real CSR content becomes visible.
+  This script captures the SSR DOM as a snapshot the moment it's parsed (before any module/main
+  script runs - those are type=module and therefore deferred). While Angular rebuilds the real
+  <ds-app> underneath (visually covered by the opaque snapshot, but still interactive), the snapshot
+  keeps the page looking stable. AppComponent removes the overlay once the routed CSR page has
+  finished rendering (its DOM has settled) - see AppComponent.removeSsrOverlayWhenDomSettles.
 */
 (function () {
   if (typeof window === 'undefined' || typeof document === 'undefined') return;
-  // Skip when Cypress is driving the page. The overlay duplicates SSR DOM (moved into the
-  // overlay) alongside the CSR DOM (rendered into <ds-app>) during the masking window — so
-  // any cy.get('#some-id').click() picks up two elements and fails. The overlay is a pure
-  // UX nicety, and Cypress E2E doesn't measure visual smoothness anyway; bail early.
+  // Skip when an E2E runner is driving the page. The overlay duplicates SSR DOM (moved into the
+  // overlay) alongside the CSR DOM (rendered into <ds-app>) during the masking window — so a
+  // strict-mode locator like cy.get('#x')/page.locator('#x') picks up two elements and fails. The
+  // overlay is a pure UX nicety and E2E doesn't measure visual smoothness, so bail early for both
+  // Cypress (window.Cypress) and any WebDriver-based runner (Playwright/Selenium: navigator.webdriver).
   if (typeof window.Cypress !== 'undefined') return;
+  if (typeof navigator !== 'undefined' && navigator.webdriver) return;
   try {
     var app = document.querySelector('ds-app');
     // If SSR was skipped for this route (excludePathPatterns), there are no children; nothing to mask.
@@ -78,53 +89,44 @@
     // so the overlay is pixel-identical to what the user already saw before Angular booted.
     // Cloning via innerHTML loses parent-context-dependent rendering.
     //
-    // Accessibility note: we deliberately do NOT set aria-hidden on the overlay. The overlay
-    // *is* the visible page during the masking window, so assistive technologies should read
-    // it. The original <ds-app> underneath gets visibility:hidden (via attribute + CSS rule),
-    // which removes both itself and its children from the accessibility tree.
+    // Accessibility: the snapshot is now a purely VISUAL mask, so we mark it aria-hidden. The real
+    // <ds-app> underneath is no longer visibility:hidden — it stays in the accessibility tree and
+    // is the interactive surface — so assistive tech (and mouse clicks) target the live, functional
+    // app rather than a soon-to-be-removed duplicate snapshot. This also avoids the duplicate
+    // a11y nodes the old (overlay-as-a11y-surface) approach produced during masking.
     var overlay = document.createElement('div');
     overlay.id = '__dspace_ssr_overlay';
+    overlay.setAttribute('aria-hidden', 'true');
     while (app.firstChild) {
       overlay.appendChild(app.firstChild);
     }
 
-    // Hide the now-empty <ds-app> so Angular can rebuild into it invisibly. We use an attribute
-    // (CSS in <head> targets it) rather than setting .style.visibility directly so Angular's
-    // template doesn't blow it away on first ChangeDetection.
+    // Mark <ds-app> as being masked. NOTE: this attribute is now only a state hook — it no longer
+    // hides the element (the visibility:hidden CSS rule was removed) so the live app stays visible
+    // (covered by the opaque overlay) and, crucially, INTERACTIVE while Angular rebuilds into it.
     app.setAttribute('data-dspace-ssr-hidden', '');
     document.body.appendChild(overlay);
 
     var removing = false;
     window.__dspaceRemoveSsrOverlay = function () {
-      // Re-entrancy guard: null the pointer up-front so a racing isStable + 15s safety
+      // Re-entrancy guard: null the pointer up-front so a racing DOM-settle removal + 15s safety
       // fallback cannot start two interleaving fade-out passes (which would re-remove
       // the kept styles from underneath the first pass).
       if (removing) return;
       removing = true;
       window.__dspaceRemoveSsrOverlay = null;
 
-      // Always unhide the real <ds-app> and drop the kept SSR styles first, even if the
-      // overlay node has gone missing (e.g. removed by an extension or another script).
-      // A bare early return here would otherwise leave the app permanently hidden.
-      app.removeAttribute('data-dspace-ssr-hidden');
-
-      var removeKeptStyles = function () {
-        for (var i = 0; i < keptStyles.length; i++) {
-          if (keptStyles[i].parentNode) keptStyles[i].parentNode.removeChild(keptStyles[i]);
-        }
-        keptStyles = [];
-      };
-
       var el = document.getElementById('__dspace_ssr_overlay');
-      if (!el) {
-        removeKeptStyles();
-        return;
-      }
+      if (!el) return;
+      app.removeAttribute('data-dspace-ssr-hidden');
       el.style.transition = 'opacity 150ms ease-out';
       el.style.opacity = '0';
       setTimeout(function () {
         if (el && el.parentNode) el.parentNode.removeChild(el);
-        removeKeptStyles();
+        for (var i = 0; i < keptStyles.length; i++) {
+          if (keptStyles[i].parentNode) keptStyles[i].parentNode.removeChild(keptStyles[i]);
+        }
+        keptStyles = [];
       }, 200);
     };
 
diff --git a/src/typings.d.ts b/src/typings.d.ts
index f7397dc290e..445b5ecd2c7 100644
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -89,8 +89,9 @@ declare module '*.scss' {
 
 /**
  * Window global injected by the inline anti-flicker bootstrap script in `src/index.html`.
- * Called once by `AppComponent.removeSsrOverlayWhenStable()` when `ApplicationRef.isStable`
- * fires, to drop the SSR-mask overlay and let the freshly built CSR DOM become visible.
+ * Called once by `AppComponent.removeSsrOverlayWhenContentVisible()` (via
+ * `removeSsrOverlayWhenDomSettles()`) once the routed CSR page's DOM has settled, to drop the
+ * SSR-mask overlay and let the freshly built CSR DOM become visible.
  */
 interface Window {
   __dspaceRemoveSsrOverlay?: (() => void) | null;