UX: Splash screen v1 improvements (#17214)

This commit does six things

* changes the animation for the splash screen. To a more subtle animation.
* defers displaying the splash by 1.5 seconds
* defers displaying the splash "loading" text by 2.5 seconds
* defers removing the splash until all Discourse initializers have run
* fixes a display issue in Firefox
* Inlines the SVG as a base64 and inlines the required CSS.

The encoded SVG is hard coded for now, but we will use a helper to generate that based on the file after some testing.

app/assets/javascripts/discourse/app/app.js

@@ -52,9 +52,6 @@ const Discourse = Application.extend({
   start() {
     document.querySelector("noscript")?.remove();
 
-    // The app booted. Remove the splash screen
-    document.querySelector("#d-splash")?.remove();
-
     if (Error.stackTraceLimit) {
       // We need Errors to have full stack traces for `lib/source-identifier`
       Error.stackTraceLimit = Infinity;
@@ -84,6 +81,9 @@ const Discourse = Application.extend({
         initialize: () => withPluginApi(cb.version, cb.code),
       });
     });
+
+    // The app booted. Remove the splash screen
+    document.querySelector("#d-splash")?.remove();
   },
 
   _registerPluginCode(version, code) {

app/assets/stylesheets/d_splash.scss

@@ -1,59 +0,0 @@
-html {
-  background: var(--secondary);
-  // needed because this sheet loads early and we want no scroll bars until
-  // the splash is removed.
-  overflow: hidden !important;
-}
-
-#d-splash {
-  display: grid;
-  place-items: center;
-  position: relative;
-  backface-visibility: hidden;
-
-  .preloader-image {
-    max-width: 100%;
-    height: 100vh;
-    object-fit: none;
-  }
-
-  .preloader-text {
-    padding-top: 5em;
-    position: absolute;
-    display: grid;
-    grid-auto-flow: column;
-    place-items: center;
-
-    &:after {
-      animation: loading-text 3s infinite;
-      content: "";
-      position: absolute;
-      top: 5em;
-      margin: 0 0.1em;
-      left: 100%;
-      // TODO: this needs R2 RTL magic
-      .rtl & {
-        left: 0;
-        right: 100%;
-      }
-    }
-  }
-}
-
-@keyframes loading-text {
-  0% {
-    content: "";
-  }
-
-  25% {
-    content: ".";
-  }
-
-  50% {
-    content: "..";
-  }
-
-  75% {
-    content: "...";
-  }
-}

app/views/common/_discourse_splash.html.erb

@@ -1,17 +1,83 @@
 <%- unless customization_disabled? %>
-  <section id="d-splash">
+<section id="d-splash">
-    <%= discourse_stylesheet_link_tag 'd_splash', theme_id: nil %>
+  <style>
+    html {
+      background: var(--secondary);
+      overflow: hidden !important;
+    }
 
-    <img
+    #d-splash {
-      class="preloader-image"
+      display: grid;
-      src="/images/preloader.svg"
+      place-items: center;
-      alt="<%=SiteSetting.title%>"
+      position: relative;
-    >
+      backface-visibility: hidden;
+      will-change: transform;
+    }
 
-    <div class="preloader-text">
+    #d-splash .preloader-image {
-      <span>
+      max-width: 100%;
-        <%= I18n.t("js.preloader_text") %>
+      height: 100vh;
-      </span>
+    }
-    </div>
+
-  </section>
+    #d-splash .preloader-text {
+      padding-top: 4em;
+      position: absolute;
+      display: grid;
+      grid-auto-flow: column;
+      place-items: center;
+      opacity: 0;
+      animation: fade-in 0.5s ease-in-out;
+      animation-delay: 2.5s;
+      animation-fill-mode: forwards;
+    }
+
+    #d-splash .preloader-text:after {
+      animation: loading-text 3s infinite;
+      content: "";
+      position: absolute;
+      top: 4em;
+      margin: 0 0.1em;
+      left: 100%;
+    }
+
+    .rtl #d-splash .preloader-text:after {
+      left: 0;
+      right: 100%;
+    }
+
+    @keyframes fade-in {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+
+    @keyframes loading-text {
+      0% {
+        content: "";
+      }
+      25% {
+        content: ".";
+      }
+      50% {
+        content: "..";
+      }
+      75% {
+        content: "...";
+      }
+    }
+  </style>
+
+  <img
+    class="preloader-image"
+    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' data-ember-extension='1'%0A%3E%3Cstyle%3E :root %7B /* these need to be injected dynamicly to match theme colors */ --primary: %23222222; --secondary: %23ffffff; --tertiary: %23f15c21; --highlight: %23f0ea88; --quaternary: %2365ccff; --success: %23009900; %7D /* these styles need to live here because the SVG has a different scope */ .dots %7B animation-name: loader; animation-timing-function: ease-in-out; animation-duration: 3s; animation-iteration-count: infinite; animation-delay: 1.5s; stroke: %23fff; stroke-width: 0.5px; transform-origin: center; opacity: 0; r: max(1vw, 11px); cy: 50%25; %7D .dots:first-child %7B fill: var(--tertiary); animation-delay: 1s; %7D .dots:nth-child(2) %7B fill: var(--tertiary); animation-delay: 1.1s; %7D .dots:nth-child(3) %7B fill: var(--highlight); animation-delay: 1.2s; %7D .dots:nth-child(4) %7B fill: var(--quaternary); animation-delay: 1.3s; %7D .dots:nth-child(5) %7B fill: var(--quaternary); animation-delay: 1.4s; %7D @keyframes loader %7B 15%25 %7B opacity: 0; transform: scale(1); %7D 45%25 %7B opacity: 1; transform: scale(0.7); %7D 65%25 %7B opacity: 1; transform: scale(0.7); %7D 95%25 %7B opacity: 0; transform: scale(1); %7D %7D %3C/style%3E%3Cg class='container'%3E%3Ccircle class='dots' cx='30vw' /%3E%3Ccircle class='dots' cx='40vw' /%3E%3Ccircle class='dots' cx='50vw' /%3E%3Ccircle class='dots' cx='60vw' /%3E%3Ccircle class='dots' cx='70vw' /%3E%3C/g%3E%3C/svg%3E%0A"
+    alt="<%=SiteSetting.title%>"
+  />
+
+  <div class="preloader-text">
+    <span> <%= I18n.t("js.preloader_text") %> </span>
+  </div>
+</section>
 <%- end %>

app/views/layouts/application.html.erb

@@ -9,10 +9,6 @@
     <%= render partial: "layouts/head" %>
     <%= discourse_csrf_tags %>
 
-    <%- if include_splash_screen? %>
-      <link rel="preload" as="image" href="/images/preloader.svg">
-    <%- end %>
-
     <%- if SiteSetting.enable_escaped_fragments? %>
       <meta name="fragment" content="!">
     <%- end %>

public/images/preloader.svg

@@ -1,9 +1,8 @@
 <svg
-  version="1.1"
-  height="2000"
-  width="2000"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
+  version="1.1"
+  data-ember-extension="1"
 >
   <style>
     :root {
@@ -22,19 +21,23 @@
       animation-timing-function: ease-in-out;
       animation-duration: 3s;
       animation-iteration-count: infinite;
+      animation-delay: 1.5s;
       stroke: #fff;
       stroke-width: 0.5px;
+      transform-origin: center;
+      opacity: 0;
+      r: max(1vw, 11px);
+      cy: 50%;
     }
 
     .dots:first-child {
       fill: var(--tertiary);
-      animation-delay: 1.4s;
+      animation-delay: 1s;
     }
 
     .dots:nth-child(2) {
       fill: var(--tertiary);
-      animation-delay: 1.3s;
+      animation-delay: 1.1s;
-      opacity: 0.6;
     }
 
     .dots:nth-child(3) {
@@ -44,42 +47,42 @@
 
     .dots:nth-child(4) {
       fill: var(--quaternary);
-      animation-delay: 1.1s;
+      animation-delay: 1.3s;
     }
 
     .dots:nth-child(5) {
       fill: var(--quaternary);
-      animation-delay: 1s;
+      animation-delay: 1.4s;
-    }
-
-    .container {
-      transform: translateX(-125px);
     }
 
     @keyframes loader {
       15% {
-        transform: translateX(0);
+        opacity: 0;
+        transform: scale(1);
       }
 
       45% {
-        transform: translatex(calc(250px));
+        opacity: 1;
+        transform: scale(0.7);
       }
 
       65% {
-        transform: translatex(calc(250px));
+        opacity: 1;
+        transform: scale(0.7);
       }
 
       95% {
-        transform: translateX(0);
+        opacity: 0;
+        transform: scale(1);
       }
     }
   </style>
 
   <g class="container">
-    <circle class="dots" cy="50%" r="10" cx="50vw"></circle>
+    <circle class="dots" cx="30vw" />
-    <circle class="dots" cy="50%" r="10" cx="50vw"></circle>
+    <circle class="dots" cx="40vw" />
-    <circle class="dots" cy="50%" r="10" cx="50vw"></circle>
+    <circle class="dots" cx="50vw" />
-    <circle class="dots" cy="50%" r="10" cx="50vw"></circle>
+    <circle class="dots" cx="60vw" />
-    <circle class="dots" cy="50%" r="10" cx="50vw"></circle>
+    <circle class="dots" cx="70vw" />
   </g>
 </svg>