Loading indicator

index.html

@@ -383,7 +383,7 @@
                 <label class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
                   <svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
                   <input id="upload-samples" type="file" class="hidden" accept="file" webkitdirectory directory multiple>
-                  <span class="text-selection_foreground">Import samples</span>
+                  <span id="sample-indicator" class="text-selection_foreground">Import samples</span>
                 </label>
               </div>
             </div>

src/DomElements.ts

@@ -19,6 +19,7 @@ export const singleElements = {
   download_universe_button: "download-universes",
   upload_universe_button: "upload-universes",
   upload_samples_button: "upload-samples",
+  sample_indicator: "sample-indicator",
   destroy_universes_button: "destroy-universes",
   documentation_button: "doc-button-1",
   eval_button: "eval-button-1",

src/InterfaceLogic.ts

@@ -161,14 +161,17 @@ export const installInterfaceLogic = (app: Editor) => {
   });
 
   app.interface.upload_samples_button.addEventListener("input", async (event) => {
-    console.log("Il se passe quelque chose")
     let fileInput = event.target as HTMLInputElement;
     if (!fileInput.files?.length) {
       return;
     }
-    console.log(fileInput.files)
+    app.interface.sample_indicator.innerText = "Loading...";
+    app.interface.sample_indicator.classList.add("animate-pulse");
     await uploadSamplesToDB(samplesDBConfig, fileInput.files).then(() => {
-        registerSamplesFromDB(samplesDBConfig, () => {});
+        registerSamplesFromDB(samplesDBConfig, () => {
+          app.interface.sample_indicator.innerText = "Import samples";
+          app.interface.sample_indicator.classList.remove("animate-pulse");
+        });
     });
   });