implement delta header

[ramboz]

After several back and forth and a deep-dive on the current implementation of the live header, here are the main constraints we operate with:

• The delta header as it is has a massive performance impact, costing ~40 LHS points. See: https://adobe-dx-support.slack.com/archives/C04JGUPQAPM/p1681748531637129
• A full re-implementation on our end is mostly a moot point as we would still depend on slow backend APIs they integrate with, and most of the effort would be on non-LHS critical elements. Plus it would force the delta team to learn new development paradigms. See: https://adobe-dx-support.slack.com/archives/C04JGUPQAPM/p1692209174307689

A hybrid approach is thus the only real option we have.

We also had a few technical blockers that were slowing us down quite a bit:

• delta header can only loaded from the *.delta.com domains (CORS reasons), and we were given st.delta.com as a playground, but this requires manually clearing the CDN cache for any modified files 1 by 1 for any update we did… This creates an unnecessary second layer of caching on top of the Franklin CDN and we need a solution from their IT to avoid breaking the dev flow for Franklin.
• Various scripts are injected at the CDN level and they also impact the score significantly and we'll have to work with the IT Delta team to get those removed in that context and/or deferred. See: https://adobe-dx-support.slack.com/archives/C04JGUPQAPM/p1681506519678259 and remove scripts injected by Akamai #148

The proposal we have is:

• revive the initial header PR feat: extract the header into a custom element #102
• make this a mock header that we load on the page initially
  • do not implement the widget dropdowns/tabs, and only do "loading" animations until the actual header is loaded
  • fully implement the dropdown menus since these are static
  • do not implement the flyout menus on the notifications, logins, etc. and also only do "loading" animations
• load the delta header in the delayed phase and swap it out silently for our mock header
• cache all user events related to the "loading" elements and replay them on the final header when it is loaded
• finally, defer/delay the scripts injected by the CDN so they don't impact the performance that much