DEV: Use performance timings to as a baseline for the splash take 2 (#17284)

We previously relied on CSS animation-delay for the splash. This means that we can get inconsistent results based on device/network conditions.

This PR moves us to a more consistent timing based on {request time + 2 seconds}

Internal topic: /t/65378/65

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

@@ -81,15 +81,6 @@ const Discourse = Application.extend({
         initialize: () => withPluginApi(cb.version, cb.code),
       });
     });
-
-    window.addEventListener(
-      "load",
-      () => {
-        // The app booted. Remove the splash screen
-        document.querySelector("#d-splash")?.remove();
-      },
-      { once: true }
-    );
   },
 
   _registerPluginCode(version, code) {

app/helpers/application_helper.rb

@@ -135,6 +135,10 @@ module ApplicationHelper
     path
   end
 
+  def self.splash_screen_nonce
+    @splash_screen_nonce ||= SecureRandom.hex
+  end
+
   def preload_script(script)
     scripts = [script]
 

app/views/common/_discourse_splash.html.erb

@@ -9,13 +9,14 @@
       display: grid;
       place-items: center;
       backface-visibility: hidden;
+      background: var(--secondary);
       position: absolute;
       left: 0;
       top: 0;
       height: 100%;
       width: 100%;
-      z-index: 1001; /* above the header */
-      background: var(--secondary);
+      z-index: 1001;
+      --animation-state: paused;
     }
 
     #d-splash .preloader-image {
@@ -28,8 +29,9 @@
       position: absolute;
       opacity: 0;
       animation: fade-in 0.5s ease-in-out;
-      animation-delay: 1.25s;
+      animation-delay: 1s;
       animation-fill-mode: forwards;
+      animation-play-state: var(--animation-state);
       color: var(--primary);
     }
 
@@ -74,7 +76,7 @@
 
   <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'%0A%3E%3Cstyle%3E /* these need to be injected dynamicly to match theme colors */ :root %7B --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; 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: 0.625s; %7D .dots:nth-child(2) %7B fill: var(--tertiary); animation-delay: 0.675s; %7D .dots:nth-child(3) %7B fill: var(--highlight); animation-delay: 0.725s; %7D .dots:nth-child(4) %7B fill: var(--quaternary); animation-delay: 0.775s; %7D .dots:nth-child(5) %7B fill: var(--quaternary); animation-delay: 0.825s; %7D @keyframes loader %7B 0%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 100%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"
+    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%0A%3E%3Cstyle%3E /* these need to be injected dynamicly to match theme colors */ :root %7B --primary: %23222222; --secondary: %23ffffff; --tertiary: %23f15c21; --highlight: %23f0ea88; --quaternary: %2365ccff; --success: %23009900; --animation-state: paused; %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-play-state: var(--animation-state); 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); %7D .dots:nth-child(2) %7B fill: var(--tertiary); animation-delay: 0.15s; %7D .dots:nth-child(3) %7B fill: var(--highlight); animation-delay: 0.3s; %7D .dots:nth-child(4) %7B fill: var(--quaternary); animation-delay: 0.45s; %7D .dots:nth-child(5) %7B fill: var(--quaternary); animation-delay: 0.6s; %7D @keyframes loader %7B 0%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 100%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%>"
   />
 
@@ -93,5 +95,59 @@
       }
     </style>
   </noscript>
+
+  <script nonce="<%= ApplicationHelper.splash_screen_nonce %>">
+    const DELAY_TARGET = 2000;
+    const POLLING_INTERVAL = 50;
+
+    const splashWrapper = document.querySelector("#d-splash");
+    const splashImage = splashWrapper?.querySelector(".preloader-image");
+
+    if (splashImage) {
+      const connectStart = performance?.timing?.connectStart || 0;
+      const splashDelay = connectStart ? DELAY_TARGET : 0;
+      const targetTime = connectStart + DELAY_TARGET;
+
+      let splashInterval;
+      let windowLoaded;
+
+      const swapSplash = () => {
+        splashWrapper?.style.setProperty("--animation-state", "running");
+
+        splashImage.src = splashImage.src.replace(
+          "--animation-state: paused;",
+          "--animation-state: running;"
+        );
+
+        clearSplashInterval();
+      };
+
+      const clearSplashInterval = () => {
+        clearInterval(splashInterval);
+        splashInterval = null;
+      };
+
+      (() => {
+        splashInterval = setInterval(() => {
+          if (windowLoaded) {
+            clearSplashInterval();
+          }
+
+          if (Date.now() > targetTime) {
+            swapSplash();
+          }
+        }, POLLING_INTERVAL);
+      })();
+
+      window.addEventListener(
+        "load",
+        () => {
+          windowLoaded = true;
+          splashWrapper?.remove();
+        },
+        { once: true }
+      );
+    }
+  </script>
 </section>
 <%- end %>

lib/content_security_policy/default.rb

@@ -73,6 +73,10 @@ class ContentSecurityPolicy
           sources << 'https://www.googletagmanager.com/gtm.js'
           sources << "'nonce-#{ApplicationHelper.google_tag_manager_nonce}'"
         end
+
+        if SiteSetting.splash_screen
+          sources << "'nonce-#{ApplicationHelper.splash_screen_nonce}'"
+        end
       end
     end
 

public/images/preloader.svg

@@ -12,6 +12,7 @@
       --highlight: #f0ea88;
       --quaternary: #65ccff;
       --success: #009900;
+      --animation-state: paused;
     }
 
     /* these styles need to live here because the SVG has a different scope */
@@ -20,6 +21,7 @@
       animation-timing-function: ease-in-out;
       animation-duration: 3s;
       animation-iteration-count: infinite;
+      animation-play-state: var(--animation-state);
       stroke: #fff;
       stroke-width: 0.5px;
       transform-origin: center;
@@ -30,27 +32,26 @@
 
     .dots:first-child {
       fill: var(--tertiary);
-      animation-delay: 0.625s;
     }
 
     .dots:nth-child(2) {
       fill: var(--tertiary);
-      animation-delay: 0.675s;
+      animation-delay: 0.15s;
     }
 
     .dots:nth-child(3) {
       fill: var(--highlight);
-      animation-delay: 0.725s;
+      animation-delay: 0.3s;
     }
 
     .dots:nth-child(4) {
       fill: var(--quaternary);
-      animation-delay: 0.775s;
+      animation-delay: 0.45s;
     }
 
     .dots:nth-child(5) {
       fill: var(--quaternary);
-      animation-delay: 0.825s;
+      animation-delay: 0.6s;
     }
 
     @keyframes loader {

spec/requests/application_controller_spec.rb

@@ -665,6 +665,19 @@ RSpec.describe ApplicationController do
       expect(response.body).to include(nonce)
     end
 
+    it 'when splash screen is enabled it adds the same nonce to the policy and the inline splash script' do
+      SiteSetting.content_security_policy = true
+      SiteSetting.splash_screen = true
+
+      get '/latest'
+      nonce = ApplicationHelper.splash_screen_nonce
+      expect(response.headers).to include('Content-Security-Policy')
+
+      script_src = parse(response.headers['Content-Security-Policy'])['script-src']
+      expect(script_src.to_s).to include(nonce)
+      expect(response.body).to include(nonce)
+    end
+
     def parse(csp_string)
       csp_string.split(';').map do |policy|
         directive, *sources = policy.split