JCU/fix(ssr): stop the blank flash on load and on reload (#1493)

* JCU/fix(ssr): serve a reloaded comcol search tab from the page it belongs to

Opening a community or collection moves the address bar to its /search tab, and #1424 put that
path in ssr.excludePathPatterns. Reloading there returned the 1113-byte CSR shell, so the visitor
got a white page for 0.6s on a fast desktop and up to 3.4s on a slow one.

Both URLs render ComcolSearchSectionComponent and the comcol page itself is server-rendered, so a
GET for the bare tab URL is redirected to it; the client puts /search back in the address bar as
it did before. A URL carrying a query is left alone, which is the point of the exclusion: what
saturated SSR on mendelu (#1402) is the Discovery facet parameter space, and those URLs all carry
f. parameters. The redirect turns itself off if the tab stops being excluded, if the comcol page
ever becomes excluded, or if defaultBrowseTab is not the search tab, since then the comcol page is
a different view and the reload would land somewhere the visitor did not ask for.

Doing this in ComcolPageBrowseByComponent instead, by not redirecting to the default tab, looks
tidier and does not work: getSearchLink() returns currentPath(router) for an in-place search, so
every facet link would move to /collections/<uuid>?f. , which no pattern matches, and the trap
reopens.

Also fixes the robots.txt comment claiming the SSR-side rule is not configured, wrong since #1424.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* JCU/fix(ssr): keep the rendered page on screen while Angular rebuilds it

Every server-rendered route flashes white on load and on reload: the browser paints the SSR page,
then clears <ds-app> and renders the whole tree again. provideClientHydration() is registered in
the browser config only, never in the server one, so platform-server emits no hydration
annotations (ngh= count is 0 on every DSpace 9 instance) and Angular calls selectRootElement with
preserveContent false. Upstream issue: DSpace#3867.

index.html paints a detached clone of the server-rendered view on top and drops it once Angular has
detached the node it cloned, #main-content is visible again and the DOM has been quiet for 600ms.
Waiting for that detach matters: keyed on quiet alone the clone leaves during the long pause before
Angular starts, and the wipe happens in plain sight. Cloning rather than moving means the DOM
Angular works on is untouched, and the clone is built after the first paint so it does not delay it.

On a route in ssr.excludePathPatterns there is nothing to clone, so a spinner fills the gap instead
of a white page. It is not held to the same rule: there is no paint to protect, so it goes as soon
as something is behind it. The spinner itself is held back 400ms, so a fast bootstrap never shows one.

Kept self-contained rather than driving the removal from AppComponent, as customer/mendelu does:
measured on a production build, Angular constructs AppComponent around 5s after the script runs,
so that version only ever hit its fallback timer and left the clone up for 15s.

Enabling hydration on the server is not a substitute. Tried and measured: annotations appear, but
hydration claims only ds-app and ds-root before dying on ds-themed-root, because ThemedComponent
builds themed wrappers with ViewContainerRef.createComponent in ngAfterViewInit and then removes
the projected host. The app then renders nothing at all.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: milanmajchrak

server.ts

@@ -221,10 +221,45 @@ export function app() {
   return server;
 }
 
+/**
+ * The comcol page moves the address bar to its /search tab, which ssr.excludePathPatterns skips, so
+ * a reload there returned the CSR shell. Both URLs render ComcolSearchSectionComponent, so the bare
+ * URL goes back to the page. A query is left alone: those are the facet URLs the exclusion is for.
+ *
+ * @param req current request
+ * @returns the path to redirect to, or null to handle the request normally
+ */
+function comcolSearchTabRedirect(req): string {
+  if (!environment.ssr.enabled || (req.method !== 'GET' && req.method !== 'HEAD') || req.originalUrl.includes('?')) {
+    return null;
+  }
+  const match = /^(\/(collections|communities)\/[0-9a-f-]{36})\/search\/?$/i.exec(req.path);
+  if (match === null) {
+    return null;
+  }
+  // Only holds while search is the default tab; with another one the comcol page is a different
+  // view and the redirect would move the visitor off the tab they reloaded.
+  const page = match[2].toLowerCase() === 'collections' ? environment.collection : environment.community;
+  if (page.defaultBrowseTab !== 'search') {
+    return null;
+  }
+  const patterns = environment.ssr.excludePathPatterns;
+  // Nothing to gain when the tab is server-rendered anyway, or when the page itself is not.
+  if (!isExcludedFromSsr(req.path, patterns) || isExcludedFromSsr(match[1], patterns)) {
+    return null;
+  }
+  return req.baseUrl + match[1];
+}
+
 /*
  * The callback function to serve server side angular
  */
 function ngApp(req, res, next) {
+  const comcolPath = comcolSearchTabRedirect(req);
+  if (comcolPath !== null) {
+    res.redirect(302, comcolPath);
+    return;
+  }
   if (environment.ssr.enabled && req.method === 'GET' && (req.path === '/' || !isExcludedFromSsr(req.path, environment.ssr.excludePathPatterns))) {
     // Render the page to user via SSR (server side rendering)
     serverSideRender(req, res, next);

src/index.html

@@ -7,10 +7,181 @@
   <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">
+    #__dspace_ssr_overlay {
+      /* absolute, not fixed: the copy has to scroll with the document, and holding the page's height
+         while <ds-app> is empty keeps the scrollbar and the restored scroll position intact */
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      min-height: 100vh;
+      z-index: 10000;
+      background: #fff;
+      overflow: hidden;
+      pointer-events: none;
+    }
+    #__dspace_ssr_overlay.__dspace_ssr_booting {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    #__dspace_ssr_overlay .__dspace_ssr_spinner {
+      width: 3rem;
+      height: 3rem;
+      border: .25rem solid rgba(0, 0, 0, .1);
+      border-top-color: rgba(0, 0, 0, .35);
+      border-radius: 50%;
+      /* held back, so a bootstrap that finishes quickly never shows a spinner at all */
+      opacity: 0;
+      animation: __dspace_ssr_spin .8s linear infinite, __dspace_ssr_fade .2s ease-in .4s forwards;
+    }
+    @keyframes __dspace_ssr_spin {
+      to { transform: rotate(360deg); }
+    }
+    @keyframes __dspace_ssr_fade {
+      to { opacity: 1; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      #__dspace_ssr_overlay .__dspace_ssr_spinner {
+        animation: __dspace_ssr_fade .2s ease-in .4s forwards;
+      }
+    }
+  </style>
 </head>
 
 <body>
   <ds-app></ds-app>
+<script>
+/*
+  The browser paints the SSR page, then Angular clears <ds-app> and renders it again, because
+  provideClientHydration() is registered in the browser config only. Upstream: DSpace/dspace-angular#3867.
+  A detached clone of that paint covers the rebuild; on an SSR-excluded route there is nothing to
+  clone, so a spinner stands in. Self-contained because AppComponent is constructed far too late to
+  drive it.
+*/
+(function () {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return;
+  // Cypress and Playwright drive the real app; a cloned copy breaks element-uniqueness selectors.
+  if (typeof window.Cypress !== 'undefined') return;
+  if (typeof navigator !== 'undefined' && navigator.webdriver) return;
+
+  var QUIET_MS = 600;      // the rebuild is done after this long with no element added or removed
+  var BACKSTOP_MS = 15000; // reveal regardless, so a page that never goes quiet is not held hostage
+  var MIN_HEIGHT_PX = 200; // proves <ds-app> is no longer the empty shell
+
+  // After the first paint: cloning the server-rendered tree is not free, and the wipe it guards
+  // against is seconds away.
+  if (typeof window.requestAnimationFrame === 'function') {
+    window.requestAnimationFrame(function () { setTimeout(start, 0); });
+  } else {
+    setTimeout(start, 0);
+  }
+
+  function start() {
+  try {
+    var app = document.querySelector('ds-app');
+    if (!app) return;
+    if (document.getElementById('__dspace_ssr_overlay')) return;
+
+    var overlay = document.createElement('div');
+    overlay.id = '__dspace_ssr_overlay';
+    // A duplicate of content the live app still exposes: keep it out of the a11y tree and tab order.
+    overlay.setAttribute('aria-hidden', 'true');
+    overlay.setAttribute('inert', '');
+
+    // The node Angular throws away. While it is attached, the rebuild has not started.
+    var ssrRoot = app.firstElementChild;
+
+    if (ssrRoot) {
+      // Clone, never move: the copy keeps its _nghost/_ngcontent attributes, so it still has styles.
+      overlay.appendChild(app.cloneNode(true));
+    } else {
+      // Nothing to hold: stand in for the loader the app shows once it is up.
+      overlay.className = '__dspace_ssr_booting';
+      var spinner = document.createElement('div');
+      spinner.className = '__dspace_ssr_spinner';
+      overlay.appendChild(spinner);
+    }
+    document.body.appendChild(overlay);
+
+    var quietTimer = null;
+    var observer = null;
+
+    var remove = function () {
+      if (!overlay) return;
+      var el = overlay;
+      overlay = null;
+      if (observer) observer.disconnect();
+      if (quietTimer) clearTimeout(quietTimer);
+      window.__dspaceRemoveSsrOverlay = null;
+      el.style.transition = 'opacity 150ms ease-out';
+      el.style.opacity = '0';
+      setTimeout(function () {
+        if (el.parentNode) el.parentNode.removeChild(el);
+      }, 200);
+    };
+    window.__dspaceRemoveSsrOverlay = remove;  // so an e2e run can drop it on demand
+
+    // root.component hides .outer-wrapper behind its loader, so a visible #main-content means the
+    // routed page is on screen.
+    var contentIsVisible = function () {
+      var main = app.querySelector('#main-content');
+      return !!main && main.offsetParent !== null &&
+        app.getBoundingClientRect().height >= MIN_HEIGHT_PX;
+    };
+
+    var maybeRemove = function () {
+      // Without the first half the clone leaves during the quiet stretch before Angular starts, and
+      // the wipe it exists to cover happens in plain sight.
+      if (ssrRoot && app.contains(ssrRoot)) return;
+      if (!contentIsVisible()) return;
+      // one frame, so the new content is painted before the overlay fades out
+      if (typeof window.requestAnimationFrame === 'function') {
+        window.requestAnimationFrame(remove);
+      } else {
+        remove();
+      }
+    };
+
+    var restartQuietTimer = function () {
+      if (quietTimer) clearTimeout(quietTimer);
+      quietTimer = setTimeout(maybeRemove, QUIET_MS);
+    };
+
+    // The clone has to outlast the whole rebuild, so it waits for the DOM to go quiet. The spinner
+    // is only filling a void, so it leaves as soon as there is something behind it.
+    var onMutation = ssrRoot ? restartQuietTimer : maybeRemove;
+
+    observer = new MutationObserver(function (records) {
+      for (var i = 0; i < records.length; i++) {
+        var r = records[i];
+        if (r.type !== 'childList') continue;
+        var nodes = [].slice.call(r.addedNodes).concat([].slice.call(r.removedNodes));
+        for (var j = 0; j < nodes.length; j++) {
+          if (nodes[j].nodeType === 1) { onMutation(); return; }
+        }
+      }
+    });
+    observer.observe(app, { childList: true, subtree: true });
+    onMutation();
+
+    setTimeout(remove, BACKSTOP_MS);
+  } catch (e) {
+    // A throw between appending the overlay and arming the backstop would otherwise leave it up.
+    try {
+      if (observer) observer.disconnect();
+      if (quietTimer) clearTimeout(quietTimer);
+      if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
+      window.__dspaceRemoveSsrOverlay = null;
+    } catch (ignored) { /* nothing left to do */ }
+    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 -->

src/robots.txt.ejs

@@ -31,7 +31,7 @@ Disallow: /communities/*/search
 Disallow: /*?f.
 Disallow: /*&f.
 # NOTE: robots.txt is advisory only; it does not stop crawlers that ignore it.
-# The SSR-side enforcement (ssr.excludePathPatterns) is not configured here.
+# ssr.excludePathPatterns in config.yml enforces the facet part server-side, for any user agent.
 
 # Heavy Discovery facet queries on browse pages
 Disallow: /collections/*?f