dspace-angular icon indicating copy to clipboard operation
dspace-angular copied to clipboard

Enable preboot event replay for shorter apparent TTI

Open ybnd opened this issue 1 year ago • 1 comments

References

  • Further improvement to #1733 and #1357
  • Continuation of #1760

Description

This (work-very-much-in-progress) PR continues the integration of Angular preboot into DSpace by enabling event replay, which further improves perceived loading performance by allowing (limited) interaction with the page during the SSR→CSR transition, e.g.:

  • Text typed into form inputs can be preserved
  • Clicks on internal links can be buffered until the app is loaded
    • This results in quicker navigation overall (currently, this triggers a full SSR request)
  • Clicks on interactive elements (e.g. dropdown buttons) can be buffered until the app is loaded
    • While there will be a noticeable delay, but this is still a leg up on the current behaviour (just ignoring the events)

While working on #1760 it became clear that this feature won't be easy (or quick) to integrate

  • Elements need to have a unique id to support event replay. Currently this is not the case for a serious number of our components. For now, this branch can serve as a showcase of the kind & number of changes we would need to make to address this.
  • a.btn-style buttons won't work with event replay if defined with [routerLink]=""; they should use href="javascript:void(0)"; instead.
  • We should make sure that internal links are covered by event replay
  • Interactive buttons don't seem work consistently with event replay; this should be investigated further
  • Once implemented, testing all of these interactions will probably be quite involved as well

Instructions for Reviewers

TBD

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.

ybnd avatar Aug 11 '22 09:08 ybnd

This pull request introduces 1 alert when merging 818c1426d6bdf4df92bd88f7220eeb6c1c534d06 into f6d2014bf41eac79df39eb11be29241d21112685 - view on LGTM.com

new alerts:

  • 1 for Unused variable, import, function or class

lgtm-com[bot] avatar Aug 11 '22 09:08 lgtm-com[bot]