fix: make dynamic resource loading more robust

xgnw · Oct 2, 2024 · 405e752 · 405e752
1 parent 7e3aca6
commit 405e752
Showing 1 changed file with 42 additions and 38 deletions.
diff --git a/front-end/index.html b/front-end/index.html
@@ -661,48 +661,51 @@
         return Promise.all(resources.map(load));
 
         async function load(resource) {
-          return new Promise((resolve, reject) => {
-            const rid = btoa(encodeURIComponent(resource));
-            if (document.getElementById(rid)) {
-              return resolve();
-            }
+          if (!window.resourceCache[resource]) {
+            window.resourceCache[resource] = handle();
+          }
+          return window.resourceCache[resource];
 
-            const timeout = 5000;
-            let element;
-            switch (resource.split('.').pop()) {
-              case 'css':
-                element = document.createElement('link');
-                element.href = resource;
-                element.rel = 'stylesheet';
-                break;
-              case 'js':
-                element = document.createElement('script');
-                element.src = resource;
-                break;
-              default:
-                return reject(new Error('Unsupported resource type'));
-            }
-            element.id = rid;
+          function handle() {
+            return new Promise((resolve, reject) => {
+              const timeout = 5000;
+              let element;
+              switch (resource.split('.').pop()) {
+                case 'css':
+                  element = document.createElement('link');
+                  element.href = resource;
+                  element.rel = 'stylesheet';
+                  break;
+                case 'js':
+                  element = document.createElement('script');
+                  element.src = resource;
+                  break;
+                default:
+                  return reject(new Error('Unsupported resource type'));
+              }
 
-            let loaded = false;
-            element.onload = () => {
-              loaded = true;
-              resolve();
-            };
-            element.onerror = () => {
-              reject(new Error(`Failed to load resource: ${resource}`));
-            };
-            setTimeout(() => {
-              if (!loaded) {
-                reject(new Error(`Resource loading timed out: ${resource}`));
+              let loaded = false;
+              element.onload = () => {
+                loaded = true;
+                resolve();
+              };
+
+              function error(reason) {
+                if (!loaded) {
+                  document.head.removeChild(element);
+                  delete window.resourceCache[resource];
+                  reject(new Error(`${reason}: ${resource}`));
+                }
               }
-            }, timeout);
+              element.onerror = () => error('Failed to load resource');
+              setTimeout(() => error('Resource loading timed out'), timeout);
 
-            document.head.insertBefore(
-              element,
-              document.head.firstElementChild
-            );
-          });
+              document.head.insertBefore(
+                element,
+                document.head.firstElementChild
+              );
+            });
+          }
         }
       }
 
@@ -1849,6 +1852,7 @@
           preview: false,
         };
         window.fileCache = new Map();
+        window.resourceCache = Object.create(null);
         const initialPath =
           new URLSearchParams(window.location.search).get('path') ||
           window.api.root;