feat(index.html): Clean up canvas and analysis loading visuals

1 files changed, 28 insertions, 6 deletions

diff --git a/js/index.js b/js/index.js
index f1d4210..13c8520 100644
--- a/js/index.js
+++ b/js/index.js
@@ -152,12 +152,23 @@ resultCell.innerHTML = `
 }
 
 async function main() {
+    const imageInputFile = document.getElementById("image-file");
+    const imageInputUrl = document.getElementById("image-url");
+    const renderContainer = document.getElementById("render");
+    
+    // Disable inputs until database loads
+    imageInputFile.disabled = true;
+    imageInputUrl.disabled = true;
+    
     const _model = await faceLandmarksDetection.load(faceLandmarksDetection.SupportedPackages.mediapipeFacemesh, {
         maxFaces: 1
     });
     window.database = await setupDatabase();
-    const imageInputFile = document.getElementById("image-file");
-    const imageInputUrl = document.getElementById("image-url");
+    
+    // Enable inputs after database loads
+    imageInputFile.disabled = false;
+    imageInputUrl.disabled = false;
+    
     const introductionElement = document.getElementById("introduction");
     const analyzingElement = document.getElementById("analyzing");
     const canvas = document.getElementById("canvas");
@@ -206,6 +217,10 @@ if (gradingToggle) {
 
     async function onChange(url) {
         setStatus("Analysing");
+        
+        // Show canvas container with loading overlay
+        renderContainer.classList.remove("d-none");
+        renderContainer.classList.add("loading");
 
         let analysis = await analyze(canvas, ctx, url);
 
@@ -336,6 +351,9 @@ if (gradingToggle) {
         }
 
         analyzingElement.classList.add("d-none");
+        
+        // Remove loading overlay and show canvas
+        renderContainer.classList.remove("loading");
 
         calculate();
         render();
@@ -344,10 +362,14 @@ if (gradingToggle) {
     function clearData() {
         canvas.width = 0;
         canvas.height = 0;
-        for (let i of Object.values(data)) {
-            i.render.innerHTML = "";
-            i.ideal.innerHTML = "";
-            i.assessment.innerHTML = "";
+        renderContainer.classList.add("d-none");
+        renderContainer.classList.remove("loading");
+        if (data) {
+            for (let i of Object.values(data)) {
+                i.render.innerHTML = "";
+                i.ideal.innerHTML = "";
+                i.assessment.innerHTML = "";
+            }
         }
     }