Try to speed up LCP allSettled

Co-authored-by: babstar99 <babstar99@users.noreply.github.com>

docs/faq.md

@@ -165,7 +165,7 @@ you can [start the PairDrop instance with an activated WebSocket fallback](https
 
 Files are sent directly between peers.
 PairDrop doesn't even use a database.
-If curious, study [the server](https://github.com/schlagmichdoch/pairdrop/blob/master/index.js).
+If curious, study [the signaling server](https://github.com/schlagmichdoch/PairDrop/blob/master/server/ws-server.js).
 WebRTC encrypts the files in transit.
 
 If the devices are on the same network,
@@ -188,9 +188,8 @@ to learn more about STUN, TURN and WebRTC.
 <br>
 
 Yes. Your files are sent using WebRTC, encrypting them in transit.
-To ensure the connection is secure and there is no [MITM](https://wikiless.org/wiki/Man-in-the-middle_attack),
-compare the security number shown under the device name on both devices.
-The security number is different for every connection.
+Still you have to trust the PairDrop server. To ensure the connection is secure and there is no [MITM](https://wikiless.org/wiki/Man-in-the-middle_attack) there is a plan to make PairDrop
+zero trust by encrypting the signaling and implementing a verification process. See [issue #180](https://github.com/schlagmichdoch/PairDrop/issues/180) to keep updated.
 
 <br>
 

public/scripts/localization.js

@@ -1,5 +1,5 @@
 class Localization {
-    constructor() {
+    static async initiate() {
         Localization.$htmlRoot = document.querySelector('html');
 
         Localization.defaultLocale = "en";
@@ -16,6 +16,8 @@ class Localization {
         Localization.initialLocale = storedLanguageCode && Localization.localeIsSupported(storedLanguageCode)
             ? storedLanguageCode
             : Localization.systemLocale;
+
+        await Localization.setInitialTranslation();
     }
 
     static localeIsSupported(locale) {
@@ -47,8 +49,9 @@ class Localization {
             || Localization.defaultLocale;
     }
 
-    async setInitialTranslation() {
-        await Localization.setTranslation(Localization.initialLocale)
+    static async setInitialTranslation() {
+        await Localization.setTranslation(Localization.initialLocale);
+        console.log("Initial translation successful.");
     }
 
     static async setTranslation(locale) {

public/scripts/main.js

@@ -1,15 +1,10 @@
 class PairDrop {
 
     constructor() {
-        this.$headerNotificationBtn = $('notification');
-        this.$headerEditPairedDevicesBtn = $('edit-paired-devices');
-        this.$footerPairedDevicesBadge = $$('.discovery-wrapper .badge-room-secret');
-        this.$headerInstallBtn = $('install');
-
-        this.deferredStyles = [
+        this.stylesDeferred = [
             "styles/styles-deferred.css"
         ];
-        this.deferredScripts = [
+        this.scriptsDeferred = [
             "scripts/browser-tabs-connector.js",
             "scripts/util.js",
             "scripts/network.js",
@@ -20,18 +15,6 @@ class PairDrop {
             "scripts/heic2any.min.js"
         ];
 
-        this.registerServiceWorker();
-
-        Events.on('beforeinstallprompt', e => this.onPwaInstallable(e));
-
-        this.persistentStorage = new PersistentStorage();
-        this.localization = new Localization();
-        this.themeUI = new ThemeUI();
-        this.backgroundCanvas = new BackgroundCanvas();
-        this.headerUI = new HeaderUI();
-        this.centerUI = new CenterUI();
-        this.footerUI = new FooterUI();
-
         this.initialize()
             .then(_ => {
                 console.log("Initialization completed.");
@@ -39,44 +22,64 @@ class PairDrop {
     }
 
     async initialize() {
-        // Translate page before fading in
-        await this.localization.setInitialTranslation()
-        console.log("Initial translation successful.");
+        // Register Service Worker
+        console.log('Register Service Worker...');
+        await this.registerServiceWorker();
 
-        // Show "Loading..." until connected to WsServer
-        await this.footerUI.showLoading();
+        Events.on('beforeinstallprompt', e => this.onPwaInstallable(e));
 
-        // Evaluate css shifting UI elements and fade in UI elements
-        await this.evaluatePermissionsAndRoomSecrets();
-        await this.headerUI.evaluateOverflowing();
-        await this.headerUI.fadeIn();
-        await this.footerUI._evaluateFooterBadges();
-        await this.footerUI.fadeIn();
-        await this.centerUI.fadeIn();
-        await this.backgroundCanvas.fadeIn();
+        this.$headerNotificationBtn = $('notification');
+        this.$headerEditPairedDevicesBtn = $('edit-paired-devices');
+        this.$footerPairedDevicesBadge = $$('.discovery-wrapper .badge-room-secret');
+        this.$headerInstallBtn = $('install');
+
+        this.themeUI = new ThemeUI();
+        this.backgroundCanvas = new BackgroundCanvas();
+        this.headerUI = new HeaderUI();
+        this.centerUI = new CenterUI();
+        this.footerUI = new FooterUI();
+
+        // Translate page, initiate database, and evaluate what to show
+        await Promise.allSettled([
+            PersistentStorage.initiate(),
+            Localization.initiate(),
+            this.evaluatePermissionsAndRoomSecrets()
+        ]);
+
+        // Evaluate css shifting UI elements and show loading placeholder
+        await Promise.allSettled([
+            this.headerUI.evaluateOverflowing(),
+            this.footerUI._evaluateFooterBadges(),
+            this.footerUI.showLoading()
+        ]);
+
+        // Fade in UI elements
+        await Promise.allSettled([
+            this.headerUI.fadeIn(),
+            this.footerUI.fadeIn(),
+            this.centerUI.fadeIn(),
+            this.backgroundCanvas.fadeIn()
+        ]);
+
+        // Evaluate url params as soon as client is connected to the websocket
+        console.log("Evaluate URL params as soon as websocket connection is established.");
+        Events.on('ws-connected', _ => this.evaluateUrlParams(), {once: true});
 
         // Load deferred assets
         console.log("Load deferred assets...");
         await this.loadDeferredAssets();
         console.log("Loading of deferred assets completed.");
 
+        // Hydrate UI
         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 as soon as websocket connection is established.");
-        Events.on('ws-connected', _ => this.evaluateUrlParams(), {once: true});
     }
 
-    registerServiceWorker() {
+    async registerServiceWorker() {
         if ('serviceWorker' in navigator) {
-            navigator.serviceWorker
-                .register('service-worker.js')
-                .then(serviceWorker => {
-                    console.log('Service Worker registered');
-                    window.serviceWorker = serviceWorker
-                });
+            window.serviceWorker = await navigator.serviceWorker.register('service-worker.js');
+            console.log('Service Worker registered.');
         }
     }
 
@@ -105,11 +108,10 @@ class PairDrop {
         }
     }
 
-    loadDeferredAssets() {
-        const stylePromises = this.deferredStyles.map(url => this.loadAndApplyStylesheet(url));
-        const scriptPromises = this.deferredScripts.map(url => this.loadAndApplyScript(url));
-
-        return Promise.all([...stylePromises, ...scriptPromises]);
+    async loadDeferredAssets() {
+        const stylePromises = this.stylesDeferred.map(url => this.loadAndApplyStylesheet(url));
+        const scriptPromises = this.scriptsDeferred.map(url => this.loadAndApplyScript(url));
+        await Promise.allSettled([...stylePromises, ...scriptPromises]);
     }
 
     loadStyleSheet(url) {

public/scripts/persistent-storage.js

@@ -1,5 +1,5 @@
 class PersistentStorage {
-    constructor() {
+    static async initiate() {
         if (!('indexedDB' in window)) {
             PersistentStorage.logBrowserNotCapable();
             return;

public/scripts/ui-main.js

@@ -214,6 +214,7 @@ class FooterUI {
     }
 
     async showLoading() {
+        // Show "Loading..." until connected to WsServer
         this.$displayName.setAttribute('placeholder', this.$displayName.dataset.placeholder);
     }
 

public/service-worker.js

@@ -156,7 +156,7 @@ self.addEventListener('activate', evt => {
         return evt.waitUntil(
             caches.keys()
                 .then(cacheNames => {
-                    return Promise.all(
+                    return Promise.allSettled(
                         cacheNames.map(cacheName => {
                             if (cacheName !== cacheTitle) {
                                 return caches.delete(cacheName);