Further optimize initial page load by leveraging preboot

[ybnd]

References

• Fixes #1733
• Further improvent to #1357
• Proposed continuation: #1761

Description

This PR introduces Angular preboot as a next step in improving initial page load performance in production mode.

The main improvement in this PR concerns the transition from server-side to client-side rendered HTML on lazily-loaded pages (e.g. /search, /items/... etc.)

• Instead of blanking out the page while it is being replaced, preboot buffers the CSR page in the background while the SSR page is still visible and only replaces it once the app is completely done loading

  This results in significantly smoother page loads

Changes:

• Added preboot

• Fixed some minor compatibility issues between DSpace and preboot

  • Made ApplicationRef.isStable more reliable (preboot depends on it)
  • Workaround for loss of CSS during CSR

• Fixed some minor bugs with the navbar search box & admin sidebar

• Added an animation to make it more clear when the application is still loading. IMO this can help a lot with understanding that e.g. events may not come through

  More of a proof-of-concept for now, feedback is greatly appreciated!

  • There's a hiccup in the animation around the time the CSR buffering starts, not sure how to get rid of it
  • For this to work, the SSR HTML must start out with the animation playing -- this also means that it stays on for users that disable JS

Caveats / further work:

• We've observed very minor flashing on some DSO pages with thumbnails even after this PR
• On some systems we've seen fonts flash back and forth between the ones downloanded ~ SSR and the fallbacks during the transition. At this point it's not exactly cear why this happens (or why it doesn't in the other cases)
• preboot currently doesn't support Angular 13 without a workaround that hasn't been merged yet
  • There is a fork on NPM that includes it -- confirmed that we can get it working properly again if we use this.
  • However, we don't recommend merging this PR until this problem is addressed in preboot itself
• Another feature of preboot is to capture interaction events on the SSR page and replay them once the CSR page is loaded. However, fully integrating this would require more time. See #1761 for more information.

Instructions for Reviewers

Compare initial load perfomance in production mode between this PR and current main in different browsers

1. Start from a blank page

2. Open any lazily-loaded DSpace page (try this for multiple pages, while logged in and not)

   • /search?q=...
   • /communities/...
   • ...

3. Do the same on https://demo7.dspace.org/home and compare for "smoothness"

   • In the current build, the page will blank out for a moment while rendering.

     This PR should significantly improve this

   • Currently there is a glitch when loading or refreshing pages while already logged in; the SSR page accounts for the admin sidebar as if it was pinned, while it can't be.

     This PR should eliminate this bug.

4. Hard refresh the page and compare in the same way. Note that the "feel" can be quite different between these two cases -- when loading from a blank page the flashing tends to be more noticeable

Checklist

This checklist provides a reminder of what we are going to look for when reviewing your PR. You need not complete this checklist prior to creating your PR (draft PRs are always welcome). If you are unsure about an item in the checklist, don't hesitate to ask. We're here to help!

• [ ] My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• [ ] My PR passes TSLint validation using yarn run lint
• [ ] My PR doesn't introduce circular dependencies
• [ ] My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• [ ] My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• [ ] If my PR includes new, third-party dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.