From 6737dcacf77d04483678990a14daaa6b7ea46e66 Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Fri, 15 Dec 2023 23:40:30 +0100
Subject: [PATCH] Defer scripts and prevent deferred stylesheets from being
 render blocking

---
 public/index.html      |  8 ++++----
 public/scripts/main.js | 12 ++++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/public/index.html b/public/index.html
index 3c3c03a9..0fa0e94a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -734,10 +734,10 @@ <h1>PairDrop</h1>
         </symbol>
     </svg>
     <!-- Scripts -->
-    <script src="scripts/localization.js"></script>
-    <script src="scripts/persistent-storage.js"></script>
-    <script src="scripts/ui-main.js"></script>
-    <script src="scripts/main.js"></script>
+    <script src="scripts/localization.js" defer></script>
+    <script src="scripts/persistent-storage.js" defer></script>
+    <script src="scripts/ui-main.js" defer></script>
+    <script src="scripts/main.js" defer></script>
     <!-- Sounds -->
     <audio id="blop" autobuffer="true">
         <source src="sounds/blop.mp3" type="audio/mpeg">
diff --git a/public/scripts/main.js b/public/scripts/main.js
index 1b05c79f..8960ed2b 100644
--- a/public/scripts/main.js
+++ b/public/scripts/main.js
@@ -65,7 +65,7 @@ class PairDrop {
         console.log("UI hydrated.");
 
         // Evaluate url params as soon as ws is connected
-        console.log("Evaluate URL params when websocket connection is established.");
+        console.log("Evaluate URL params as soon as websocket connection is established.");
         Events.on('ws-connected', _ => this.evaluateUrlParams(), {once: true});
     }
 
@@ -115,10 +115,14 @@ class PairDrop {
     loadStyleSheet(url) {
         return new Promise((resolve, reject) => {
             let stylesheet = document.createElement('link');
-            stylesheet.rel = 'stylesheet';
+            stylesheet.rel = 'preload';
+            stylesheet.as = 'style';
             stylesheet.href = url;
-            stylesheet.type = 'text/css';
-            stylesheet.onload = resolve;
+            stylesheet.onload = _ => {
+                stylesheet.onload = null;
+                stylesheet.rel = 'stylesheet';
+                resolve();
+            };
             stylesheet.onerror = reject;
 
             document.head.appendChild(stylesheet);