From d8f95320397cacdf402ea3b9d9291cfb79c0851e Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Wed, 13 Dec 2023 19:20:57 +0100
Subject: [PATCH] Parallelize asset loading

---
 public/scripts/main.js | 52 ++++++++++++++++++++++++------------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/public/scripts/main.js b/public/scripts/main.js
index e6ff259..1b05c79 100644
--- a/public/scripts/main.js
+++ b/public/scripts/main.js
@@ -56,13 +56,16 @@ class PairDrop {
         await this.backgroundCanvas.fadeIn();
 
         // Load deferred assets
+        console.log("Load deferred assets...");
         await this.loadDeferredAssets();
         console.log("Loading of deferred assets completed.");
 
+        console.log("Hydrate UI...");
         await this.hydrate();
         console.log("UI hydrated.");
 
         // Evaluate url params as soon as ws is connected
+        console.log("Evaluate URL params when websocket connection is established.");
         Events.on('ws-connected', _ => this.evaluateUrlParams(), {once: true});
     }
 
@@ -102,14 +105,11 @@ class PairDrop {
         }
     }
 
-    async loadDeferredAssets() {
-        console.log("Load deferred assets");
-        for (const url of this.deferredStyles) {
-            await this.loadAndApplyStylesheet(url);
-        }
-        for (const url of this.deferredScripts) {
-            await this.loadAndApplyScript(url);
-        }
+    loadDeferredAssets() {
+        const stylePromises = this.deferredStyles.map(url => this.loadAndApplyStylesheet(url));
+        const scriptPromises = this.deferredScripts.map(url => this.loadAndApplyScript(url));
+
+        return Promise.all([...stylePromises, ...scriptPromises]);
     }
 
     loadStyleSheet(url) {
@@ -125,13 +125,16 @@ class PairDrop {
         });
     }
 
-    async loadAndApplyStylesheet(url) {
-        try {
-            await this.loadStyleSheet(url);
-            console.log(`Stylesheet loaded successfully: ${url}`);
-        } catch (error) {
-            console.error('Error loading stylesheet:', error);
-        }
+    loadAndApplyStylesheet(url) {
+        return new Promise( async (resolve) => {
+            try {
+                await this.loadStyleSheet(url);
+                console.log(`Stylesheet loaded successfully: ${url}`);
+                resolve();
+            } catch (error) {
+                console.error('Error loading stylesheet:', error);
+            }
+        });
     }
 
     loadScript(url) {
@@ -145,13 +148,16 @@ class PairDrop {
         });
     }
 
-    async loadAndApplyScript(url) {
-        try {
-            await this.loadScript(url);
-            console.log(`Script loaded successfully: ${url}`);
-        } catch (error) {
-            console.error('Error loading script:', error);
-        }
+    loadAndApplyScript(url) {
+        return new Promise( async (resolve) => {
+            try {
+                await this.loadScript(url);
+                console.log(`Script loaded successfully: ${url}`);
+                resolve();
+            } catch (error) {
+                console.error('Error loading script:', error);
+            }
+        });
     }
 
     async hydrate() {
@@ -223,6 +229,8 @@ class PairDrop {
         // remove url params from url
         const urlWithoutParams = getUrlWithoutArguments();
         window.history.replaceState({}, "Rewrite URL", urlWithoutParams);
+
+        console.log("URL params evaluated.");
     }
 }