Fix Kino.HTML to wait for external scripts to load before continuing

lib/assets/html/main.js

@@ -11,16 +11,30 @@ function setInnerHTML(element, html) {
 
   element.innerHTML = html;
 
-  Array.from(element.querySelectorAll("script")).forEach((scriptEl) => {
-    const safeScriptEl = document.createElement("script");
+  Array.from(element.querySelectorAll("script")).reduce((promise, scriptEl) => {
+    return promise.then(() => {
+      const safeScriptEl = document.createElement("script");
 
-    Array.from(scriptEl.attributes).forEach((attr) => {
-      safeScriptEl.setAttribute(attr.name, attr.value);
-    });
+      // If a script is external, we wait for it to load before
+      // continuing to insert subsequent scripts.
+      const promise = scriptEl.hasAttribute("src")
+        ? new Promise((resolve, reject) => {
+            safeScriptEl.addEventListener("load", (event) => resolve(), {
+              once: true,
+            });
+          })
+        : Promise.resolve();
+
+      Array.from(scriptEl.attributes).forEach((attr) => {
+        safeScriptEl.setAttribute(attr.name, attr.value);
+      });
 
-    const scriptText = document.createTextNode(scriptEl.innerHTML);
-    safeScriptEl.appendChild(scriptText);
+      const scriptText = document.createTextNode(scriptEl.innerHTML);
+      safeScriptEl.appendChild(scriptText);
 
-    scriptEl.parentNode.replaceChild(safeScriptEl, scriptEl);
-  });
+      scriptEl.parentNode.replaceChild(safeScriptEl, scriptEl);
+
+      return promise;
+    });
+  }, Promise.resolve());
 }