Adding loading text update

Author: hellpanderrr

wiktionary_pron/index.html

@@ -121,12 +121,14 @@
             font-family: "EB Garamond";
         }
 
-        span.ipa{
+        span.ipa {
             margin-right: 5px;
         }
-        span.input_text{
+
+        span.input_text {
             margin-left: 5px;
         }
+
         .error {
             color: red;
         }
@@ -192,7 +194,7 @@
         }
 
         body.dark_mode i.fa-sun-o {
-            color: yellow;
+            color: #fefeac;
         }
 
         body i.fa-moon-o {
@@ -237,6 +239,23 @@
             position: relative
         }
 
+        #lang_container {
+
+            position: relative;
+            text-align: center;
+        }
+
+        #loading_text {
+            position: absolute;
+            top: 0;
+            right: 0;
+            font-size: 12px;
+            font-family: monospace;
+            max-width: 250px;
+            margin: 0px;
+            padding: 0px;
+        }
+
     </style>
 
 
@@ -264,11 +283,14 @@ <h1 style="flex: 1;">Online IPA Converter</h1>
         <div>
             Language:
         </div>
-        <select autocomplete="off" class="dropdown" disabled="true" id="lang">
-            <option disabled selected value> -- select an option --</option>
+        <div id="lang_container">
+            <select autocomplete="off" class="dropdown" disabled="true" id="lang">
+                <option disabled selected value> -- select an option --</option>
 
 
-        </select>
+            </select>
+            <p id="loading_text">...</p>
+        </div>
         <div>
             Additional options:
         </div>

wiktionary_pron/scripts/lua_init.js

@@ -5,10 +5,26 @@ const lua = await factory.createEngine();
 lua.global.set("fetch", (url) => fetch(url));
 
 async function mountFile(file_path, lua_path) {
-  const x = await fetch(file_path).then((data) => data.text());
-  await factory.mountFile(lua_path, x);
+  const content = await fetch(file_path).then((data) => data.text());
+  await factory.mountFile(lua_path, content);
 }
 
+function updateLoadingText(filePath, fileExtension) {
+  const loadingBar = document.getElementById("loading_text");
+
+  if (!filePath && !fileExtension) {
+    loadingBar.innerHTML = "";
+    loadingBar.style.display = "none";
+  } else {
+    loadingBar.innerHTML = `Loading ${filePath}.${fileExtension}...`;
+    loadingBar.style.display = "block";
+  }
+}
+
+lua.global.set("updateLoadingText", (file_path, extension) =>
+  updateLoadingText(file_path, extension),
+);
+
 await mountFile("../wiktionary_pron/lua_modules/memoize.lua", "memoize.lua");
 
 await lua.doString(`
@@ -27,8 +43,9 @@ await lua.doString(`
               
               --local resp = fetch(string.format('https://cdn.statically.io/gh/hellpanderrr/hellpanderrr.github.io/master/wiktionary_pron/lua_modules/%s.%s',path,extension) ):await()
               --local resp = fetch(string.format('https://cdn.jsdelivr.net/gh/hellpanderrr/hellpanderrr.github.io/wiktionary_pron/lua_modules/%s.%s',path,extension) ):await()
+              updateLoadingText(path, extension)
               local resp = fetch(string.format('../wiktionary_pron/lua_modules/%s.%s',path,extension) ):await()
-              
+              updateLoadingText("", "")
               local text = resp:text():await()
               local module =  load(text)()
               print('loaded '..path)