fix(loading): use fetch instead of iframe

jourdain · jourdain · commit d21b992def0c · 2024-03-20T13:59:25.000-06:00
diff --git a/vue2-app/public/index.html b/vue2-app/public/index.html
@@ -17,10 +17,8 @@
     <noscript>
       <strong>We're sorry but trame built by Kitware doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app">
-      <iframe src="./loading/index.html" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;border:none;">
-      </iframe>
-    </div>
+    <div id="app"></div>
+    <script>fetch("./loading.tpl").then((r) => r.text()).then((c) => document.querySelector("#app").innerHTML = c)</script>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/vue2-app/public/loading.tpl b/vue2-app/public/loading.tpl
@@ -1,10 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
-    <title>Loading...</title>
-    <style>
+<style>
       .text-no-select {
         -webkit-user-select: none;
         -moz-user-select: none;
@@ -90,12 +84,8 @@
           transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
         }
       }
-    </style>
-  </head>
-  <body>
-      <div style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;">
-        <div class="trame__loader"></div>
-        <div class="trame__message">Loading...</div>
-      </div>
-  </body>
-</html>
+</style>
+<div style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;">
+  <div class="trame__loader"></div>
+  <div class="trame__message">Loading...</div>
+</div>
diff --git a/vue3-app/index.html b/vue3-app/index.html
@@ -16,10 +16,8 @@
     <noscript>
       <strong>We're sorry but trame built by Kitware doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app">
-      <iframe src="./loading/index.html" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;border:none;">
-      </iframe>
-    </div>
+    <div id="app"></div>
+    <script>fetch("./loading.tpl").then((r) => r.text()).then((c) => document.querySelector("#app").innerHTML = c)</script>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/vue3-app/public/loading.tpl b/vue3-app/public/loading.tpl
@@ -1,10 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
-    <title>Loading...</title>
-    <style>
+<style>
       .text-no-select {
         -webkit-user-select: none;
         -moz-user-select: none;
@@ -90,12 +84,8 @@
           transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
         }
       }
-    </style>
-  </head>
-  <body>
-      <div style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;">
-        <div class="trame__loader"></div>
-        <div class="trame__message">Loading...</div>
-      </div>
-  </body>
-</html>
+</style>
+<div style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;">
+  <div class="trame__loader"></div>
+  <div class="trame__message">Loading...</div>
+</div>
