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

…wasm is loading (#2421)

Resolves:
 - #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.
1. 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.
1. If loading takes long (more than 3 seconds) text fades in and
provides additional information.
1. 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:
 - #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:

![image](https://github.com/rerun-io/rerun/assets/3312232/a8eb2473-7b7c-433a-a0b2-09c6d209c44e)

Before:

![image](https://github.com/rerun-io/rerun/assets/3312232/adcf27dc-5c59-4642-8fda-18d0de544442)

After:

![image](https://github.com/rerun-io/rerun/assets/3312232/cd4104db-be28-4c32-8171-2b9a9408cf23)

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.

![image](https://github.com/rerun-io/rerun/assets/3312232/8ba99668-5441-4652-b1f3-9c82c2b6cbb3)

- Linux:
  - [x] Chrome
  - [x] Firefox
- Mac:
  - [x] Chrome
  - [x] Firefox
  - [x] Safari
- Windows:
  - [x] Chrome
  - [x] Firefox
  - [x] Edge

* [x] I have read and agree to [Contributor
Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and
the [Code of
Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md)
* [x] I've included a screenshot or gif (if applicable)

<!-- This line will get updated when the PR build summary job finishes.
-->
PR Build Summary: https://build.rerun.io/pr/2421

<!-- pr-link-docs:start -->
Docs preview: https://rerun.io/preview/934925b/docs
Examples preview: https://rerun.io/preview/934925b/examples
<!-- pr-link-docs:end -->

crates/re_ui/src/design_tokens.rs

@@ -63,6 +63,12 @@ fn apply_design_tokens(ctx: &egui::Context) -> DesignTokens {
             egui_style.text_styles.get_mut(&text_style).unwrap().size = font_size;
         }
 
+        egui_style
+            .text_styles
+            .get_mut(&egui::TextStyle::Heading)
+            .unwrap()
+            .size = 16.0;
+
         // We want labels and buttons to have the same height.
         // Intuitively, we would just assign font_size to
         // the interact_size, but in practice text height does not match

crates/re_viewer/src/app.rs

@@ -632,19 +632,19 @@ fn paint_native_window_frame(egui_ctx: &egui::Context) {
 
 fn wait_screen_ui(ui: &mut egui::Ui, rx: &Receiver<LogMsg>) {
     ui.centered_and_justified(|ui| {
-        fn ready_and_waiting(ui: &mut egui::Ui, txt: &str) {
+        fn waiting_ui(ui: &mut egui::Ui, heading_txt: &str, msg_txt: &str) {
             let style = ui.style();
             let mut layout_job = egui::text::LayoutJob::default();
             layout_job.append(
-                "Ready",
+                heading_txt,
                 0.0,
                 egui::TextFormat::simple(
                     egui::TextStyle::Heading.resolve(style),
                     style.visuals.strong_text_color(),
                 ),
             );
             layout_job.append(
-                &format!("\n\n{txt}"),
+                &format!("\n\n{msg_txt}"),
                 0.0,
                 egui::TextFormat::simple(
                     egui::TextStyle::Body.resolve(style),
@@ -657,28 +657,36 @@ fn wait_screen_ui(ui: &mut egui::Ui, rx: &Receiver<LogMsg>) {
 
         match rx.source() {
             re_smart_channel::Source::Files { paths } => {
-                ui.strong(format!(
-                    "Loading {}…",
-                    paths
-                        .iter()
-                        .format_with(", ", |path, f| f(&format_args!("{}", path.display())))
-                ));
+                waiting_ui(
+                    ui,
+                    "Loading…",
+                    &format!(
+                        "{}",
+                        paths
+                            .iter()
+                            .format_with(", ", |path, f| f(&format_args!("{}", path.display())))
+                    ),
+                );
             }
             re_smart_channel::Source::RrdHttpStream { url } => {
-                ui.strong(format!("Loading {url}…"));
+                waiting_ui(ui, "Loading…", url);
             }
             re_smart_channel::Source::RrdWebEventListener => {
-                ready_and_waiting(ui, "Waiting for logging data…");
+                waiting_ui(ui, "Ready", "Waiting for logging data…");
             }
             re_smart_channel::Source::Sdk => {
-                ready_and_waiting(ui, "Waiting for logging data from SDK");
+                waiting_ui(ui, "Ready", "Waiting for logging data from SDK");
             }
             re_smart_channel::Source::WsClient { ws_server_url } => {
                 // TODO(emilk): it would be even better to know whether or not we are connected, or are attempting to connect
-                ready_and_waiting(ui, &format!("Waiting for data from {ws_server_url}"));
+                waiting_ui(
+                    ui,
+                    "Ready",
+                    &format!("Waiting for data from {ws_server_url}"),
+                );
             }
             re_smart_channel::Source::TcpServer { port } => {
-                ready_and_waiting(ui, &format!("Listening on port {port}"));
+                waiting_ui(ui, "Ready", &format!("Listening on port {port}"));
             }
         };
     });

scripts/demo_assets/static/index.css

@@ -4,18 +4,9 @@ html {
 }
 
 body {
-  /* Light mode background color for what is not covered by the egui canvas,
-      or where the egui canvas is translucent. */
-  background: #909090;
+  background: #0d1011;
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    /* Dark mode background color for what is not covered by the egui canvas,
-          or where the egui canvas is translucent. */
-    background: #404040;
-  }
-}
 
 /* Allow canvas to fill entire web page: */
 html,
@@ -36,15 +27,105 @@ canvas {
   top: 0%;
   left: 50%;
   transform: translate(-50%, 0%);
+  /* canvas must be on top when visible */
+  z-index: 1000;
 }
 
 * {
-  font-family: "Inter", sans-serif;
+  font-family: 'Inter', sans-serif;
   color: #f0f0f0;
 }
 
+
+/* Match the Rerun header bar. */
 .header {
-  z-index: 1000;
+  width: 100%;
+  height: 44px;
+  /* background: #111415; */
+  /* Actual value from Rerun Viewer */
+  background: #141414;
+
+}
+
+/* Create a container filling the remaining space. */
+.container {
+  position: absolute;
+  height: calc(100vh - 44px);
+  width: 100vw;
+
+}
+
+/* Centered div inside the container. */
+.centered {
+  margin-right: auto;
+  margin-left: auto;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+/* Rerun styling for normal text. */
+p {
+  /*Gray-775*/
+  color: #cad8de;
+  letter-spacing: -0.15px;
+  font-weight: 500;
+  line-height: 14px;
+}
+
+/* Rerun styling for strong text. Matches `TextStyle::Heading`. */
+.strong {
+  /*Gray-775*/
+  color: #ffffff;
+  /* Match current rerun header value */
+  font-size: 16px;
+}
+
+/* Rerun styling for subdued text.*/
+.subdued {
+  /*Gray-550*/
+  color: #7d8c92;
+  /* Larger subdued size to match current rerun font */
+  font-size: 12px;
+  letter-spacing: -0.12px;
+}
+
+pre {
+  /*Gray-550*/
+  color: #7d8c92;
+  font-size: 10px;
+  letter-spacing: -0.12px;
+}
+
+a .button {
+  display: inline-block;
+  background: white;
+  color: black;
+  padding: .75rem 1rem;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+/* Transition to hidden */
+.hidden {
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+  visibility: hidden;
+}
+
+/* Transition to visible */
+.visible {
+  opacity: 100;
+  transition: opacity 0.2s ease-in;
+  visibility: visible;
+}
+
+.demo_header {
+  z-index: 1100;
   position: absolute;
   transform: translate(-50%, 0);
   left: 50%;
@@ -54,9 +135,6 @@ canvas {
   flex-direction: row;
   gap: 4px;
 }
-.header:not(.visible) {
-  display: none;
-}
 
 .examples {
   position: relative;
@@ -69,14 +147,17 @@ canvas {
   border: none;
   border-radius: 33%;
 }
-.example-description:hover > .example-description-body {
+
+.example-description:hover>.example-description-body {
   display: flex;
 }
-.example-description:hover > .example-description-icon {
+
+.example-description:hover>.example-description-icon {
   background: #404040;
   border: none;
   border-radius: 50%;
 }
+
 .example-description-icon {
   display: flex;
   justify-content: center;
@@ -85,6 +166,7 @@ canvas {
   height: 20px;
   user-select: none;
 }
+
 .example-description-body {
   display: none;
 
@@ -101,7 +183,8 @@ canvas {
 
   width: 280px;
 }
-.example-description-body > p {
+
+.example-description-body>p {
   margin: 0;
 }
 
@@ -111,11 +194,13 @@ a.icon-link {
   width: 24.5px;
   height: 24px;
 }
+
 a.icon-link:hover {
   background: #404040;
   border: none;
   border-radius: 50%;
 }
+
 img.icon {
   max-height: 100%;
 }
@@ -140,13 +225,16 @@ img.icon {
   font-size: 14px;
   line-height: 16px;
 }
-.dropdown-title > img {
+
+.dropdown-title>img {
   width: 16px;
   height: 16px;
 }
+
 .dropdown-title:hover {
   background: #404040;
 }
+
 .dropdown-title:active {
   background: #404040;
 }
@@ -170,6 +258,7 @@ img.icon {
 
   width: 92px;
 }
+
 .dropdown-body.visible {
   display: flex;
 }
@@ -182,6 +271,7 @@ img.icon {
   display: flex;
   justify-content: space-between;
 }
+
 .dropdown-entry:hover {
   background: #404040;
 }
@@ -213,34 +303,3 @@ a.button {
   text-decoration: none;
   font-weight: 500;
 }
-
-/* ---------------------------------------------- */
-/* Loading animation from https://loading.io/css/ */
-.lds-dual-ring {
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-}
-
-.lds-dual-ring:after {
-  content: " ";
-  display: block;
-  width: 24px;
-  height: 24px;
-  margin: 0px;
-  border-radius: 50%;
-  border: 3px solid #fff;
-  border-color: #fff transparent #fff transparent;
-  animation: lds-dual-ring 1.2s linear infinite;
-}
-
-@keyframes lds-dual-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-