demo loading message

spessasus · Jun 23, 2024 · 93807aa · 93807aa
1 parent 976183d
commit 93807aa
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -27,6 +27,7 @@
   <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" fill="currentColor" class="bi bi-hourglass" viewBox="0 0 16 16">
     <path d="M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5m2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702c0 .7-.478 1.235-1.011 1.491A3.5 3.5 0 0 0 4.5 13v1h7v-1a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351v-.702c0-.7.478-1.235 1.011-1.491A3.5 3.5 0 0 0 11.5 3V2z"/>
   </svg>
+  <h1 id='loading_message'>Loading...</h1>
 </div>
 
 <div class='spessasynth_main'>

diff --git a/src/website/css/style.css b/src/website/css/style.css
@@ -198,6 +198,7 @@ button{
 }
 
 .loading {
+    flex-direction: column;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -211,6 +212,7 @@ button{
 }
 
 .loading svg {
+    margin: 3em;
     animation: spin 1s ease-in-out infinite;
 }
 

diff --git a/src/website/demo/demo_main.js b/src/website/demo/demo_main.js
@@ -19,20 +19,17 @@ const TITLE = "SpessaSynth: SoundFont2 Javascript Synthetizer Online Demo";
  * @type {HTMLHeadingElement}
  */
 let titleMessage = document.getElementById("title");
-
-
 /**
  * @type {HTMLInputElement}
  */
 let fileInput = document.getElementById("midi_file_input");
-
-
 let sfInput = document.getElementById("sf_file_input");
-
 /**
  * @type {HTMLButtonElement}
  */
 const exportButton = document.getElementById("export_button");
+const loading = document.getElementsByClassName("loading")[0];
+const loadingMessage = document.getElementById("loading_message");
 
 // IndexedDB stuff
 const dbName = "spessasynth-db";
@@ -95,11 +92,10 @@ async function demoInit()
         SpessaSynthWarn("Failed to load from db, fetching online instead");
         loadedFromDb = false;
         const progressBar = document.getElementById("progress_bar");
-        titleMessage.innerText = "Loading bundled SoundFont, please wait.";
+        loadingMessage.innerText = "Loading bundled soundfont...";
         soundFontBuffer = await fetchFont(`soundfonts/${SF_NAME}`, percent =>
         {
-            titleMessage.innerText = `Loading bundled SoundFont (${percent}%), please wait.`;
-            progressBar.style.width = `${(percent / 100) * titleMessage.offsetWidth}px`
+            loadingMessage.textContent =`Loading bundled SoundFont.. ${percent}%`;
         });
         progressBar.style.width = "0";
     }
@@ -117,11 +113,13 @@ async function demoInit()
     }
     catch (e)
     {
+
         titleMessage.innerHTML = `Error parsing soundfont: <pre style='font-family: monospace; font-weight: bold'>${e}</pre>`;
         console.log(e);
         return;
     }
     await prepareUI();
+    loadingMessage.textContent = "Ready!";
 }
 
 async function fetchFont(url, callback)
@@ -250,7 +248,6 @@ async function startMidi(midiFiles)
 async function prepareUI()
 {
     titleMessage.innerText = TITLE;
-
     try {
         const context = window.AudioContext || window.webkitAudioContext;
         window.audioContextMain = new context({ sampleRate: 44100 });
@@ -272,6 +269,7 @@ async function prepareUI()
     }
 
     // prepare midi interface
+    loadingMessage.textContent = "Initializing synthesizer...";
     window.manager = new Manager(audioContextMain, soundFontParser);
     await manager.ready;
 
@@ -350,14 +348,12 @@ fileInput.value = "";
 fileInput.focus();
 // set initial styles
 exportButton.style.display = "none";
-titleMessage.innerText = "Loading...";
 document.getElementById("sf_upload").style.display = "none";
 document.getElementById("file_upload").style.display = "none";
 
 demoInit().then(() => {
     document.getElementById("sf_upload").style.display = "flex";
     document.getElementById("file_upload").style.display = "flex";
-    const loading = document.getElementsByClassName("loading")[0];
     loading.style.opacity = "0";
     setTimeout(() => {
         loading.style.display = "none";