When loading on web, match style and show a progress indicator while wasm is loading

[jleibs]

What

Resolves:

• Improve loading screen in web and in the viewer #2261

According to the new design, here is how the loading state should work:

1. HTML and CSS loads. It renders the skeleton content without any text.
2. WASM loads. It renders the exact same skeleton content without any text. The user doesn’t notice that the rendering method switched from HTML => WASM.
3. If loading takes long (more than 3 seconds) text fades in and provides additional information.
4. When the App UI is ready, the skeleton content fades away (200ms duration) and the app fades in.

The first deployed test of this ended up with 300% progress during the download step, so I've added some extra handling for progress related to compressed streams.At the moment we default to an adhoc compression ratio, but once we land:

• Add x-goog-meta-uncompressed-size to uploaded artifacts #2422
  then the progress should be completely accurate again.

In order to make all the waiting variants more consistent, this also changes the RRD loading page.

The normal waiting page looks like:

Before:

After:

This PR does not handle progress indicator during the loading of the RRD itself. The hooks necessary to get access to progress feedback depend on essentially the same work already happening as part of: #2412 and just directly loading the rrd file is generally going to be better than showing a progress indicator. It could be worth revisiting this for things like blueprints with large static data.

This needs to be tested manually on our major OS / browser combinations:

Builds to test:

• https://app.rerun.io/commit/e15ebb5
• https://demo.rerun.io/commit/e15ebb5

If your internet connection is too fast, use developer tools to throttle connection and enable cache.

• Linux:
  • Chrome
  • Firefox
• Mac:
  • Chrome
  • Firefox
  • Safari
• Windows:
  • Chrome
  • Firefox
  • Edge

Checklist

• I have read and agree to Contributor Guide and the Code of Conduct
• I've included a screenshot or gif (if applicable)

PR Build Summary: https://build.rerun.io/pr/2421

Docs preview: https://rerun.io/preview/934925b/docs
Examples preview: https://rerun.io/preview/934925b/examples

[abey79]

Mac/Safari: for some reason, nothing is clickable but the rerun menu using the build test link (demo.rerun.io works fine). The loading screen does seem to be fine.

[nikolausWest]

Also getting the same behavior that nothing is clickable on mac chrome

[jleibs]

Thanks for testing; looks like I broke this for myself as well but I'd been so focused on the loading logic I forgot to test interactivity 🤦

[emilk]

Running https://app.rerun.io/commit/8d70d57 on a "Good 3G" connection in Firefox, Mac:

I guess we should clamp the display to at most 99%.

…but it is off by almost exactly 3x, which is suspicious since that is the chosen content_multiplier.

I checked, and the response headers look right:

[jleibs]

@emilk

I guess we should clamp the display to at most 99%.

It looks like you're testing an old build. The fixes for that are in there but on commit: https://app.rerun.io/commit/e15ebb5

[emilk]

@emilk

I guess we should clamp the display to at most 99%.

It looks like you're testing an old build. The fixes for that are in there but on commit: https://app.rerun.io/commit/e15ebb5

That makes sense now. I just clicked https://build.rerun.io/pull_request/2421/index.html and assumed newest at the bottom 🤦

[emilk]

The code duplication makes me sad, but otherwise LGTM

[emilk]

why just gzip, and not compress, deflate, br`, etc?

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding

[jleibs]

gzip is what gcloud happens to do. I'll add support for more encodings in the future:
#2452