From b49d13e407fc865e8c6a5dfe00df8af1b66708fe Mon Sep 17 00:00:00 2001
From: vcheckzen <18008498+vcheckzen@users.noreply.github.com>
Date: Thu, 3 Oct 2024 04:33:25 +0800
Subject: [PATCH] fix: make dynamic resource loading more robust

---
 front-end/index.html | 80 +++++++++++++++++++++++---------------------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/front-end/index.html b/front-end/index.html
index b46c2d3b..4081c90f 100644
--- a/front-end/index.html
+++ b/front-end/index.html
@@ -658,51 +658,55 @@
       }
 
       async function loadResource(resources) {
+        window.api.resourceCache = window.api.resourceCache || {};
         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.api.resourceCache[resource]) {
+            window.api.resourceCache[resource] = handle();
+          }
+          return window.api.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.api.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
+              );
+            });
+          }
         }
       }