Lazy load olvy's whats new content

[MichaelBuessemeyer]

This PR configures the olvy script in such a way that it does not load the whole modal iframe on page load. Instead, the modal is lazily initialized upon the user clicking the whats new button.

A important side comment:

The large images are loaded by an iframe created by olvy. The iframe itself seems to have its own limitation of max parallel requests (per domain) (for this claim I found no clear resource but it seemed that way). Thus, I would deduce that the loading of the images was only limiting the amount of inbound data but not the amount of running parallel requests.
=> The performance increase might not be that much.

URL of deployed dev instance (used for testing):

• https://lazyloadolvy.webknossos.xyz/

How it works:

The init call to olvy

webknossos/frontend/javascripts/navbar.tsx

Line 116 in 3feb8d5

window.Olvy.init(OlvyConfig);

eagerly initializes the "Whats new" modal as an iframe. This loads all those large gif and other files. To make olvy load it only when needed, the config.target needs to be set to "" as the initt function check for exactly that case. Here is the snippet from the olvy script in its init function responsible for the eager loading (this pr now skips that).

 this.config.view = viewConfig;
      if (this.config.target !== "") { // <---- here 
        if (document.readyState === "complete") {
          this.__handleWidgetSetup();
        } else {
          window.addEventListener("load", () => {
            this.__handleWidgetSetup();
          });
        }
      }

The config.target is then set when the user clicks to open the "What's new" modal.

Steps to test:

• In case you want to check whether the "how many new updates" number bubble in the top right corner of the button still works, => That is rather difficult 🙈

  • The problem arises as the default time since the last update was viewed is when the user was created -> Either test locally & edit the db entry or make a quick change to
    

    webknossos/frontend/javascripts/navbar.tsx

    Line 136 in 3feb8d5

    new Date(lastViewedTimestampWithFallback).toISOString(),

    to something like new Date("1.1.2020").toISOString(),.
  • Testing in dev instance: should be possible via db entry manipulation (but likely too much of a hassle)

• To test the lazy loading:

  • Open a new tab, open the network tab & open the deployed dev instance in that tab.
  • None of the large images should be loaded.
  • Click the "What's new" button -> The modal should open up and now finally the large images should be fetched.

Issues:

• fixes #6851

---

(Please delete unneeded items, merge only when none are left open)

• Updated changelog

[fm3]

Works for me 🎉

[philippotto]

Here is the snippet from the olvy script in its init function responsible for the eager loading

awesome that you found this behavior and solution 🎉