image upload spinner

1 files changed, 31 insertions, 2 deletions

diff --git a/public/js/profile.js b/public/js/profile.js
index 90787f0..083464f 100644
--- a/public/js/profile.js
+++ b/public/js/profile.js
@@ -23,12 +23,27 @@ function changeimage(fn) {
     input.accept= 'image/png'
 
     input.onchange = async (e) => { 
+
+        var popup = document.getElementById("popup")
+        var loader = popup.getElementsByClassName("loading")[0]
+        var message = popup.getElementsByClassName("message")[0]
+
+        loader.classList.add("hidden")
+        message.innerHTML = '';
+        popup.classList.remove("hidden")
+
         var file = e.target.files[0];
         if (file.type !== 'image/png') {
+            message.innerHTML = 'Image must be a PNG';
             return
-        } 
+        }
+
+        loader.classList.remove("hidden")
+
         let response = await fn(file);
-        alert(response.msg)
+        
+        loader.classList.add("hidden")
+        message.innerHTML = response.msg
     }
 
     input.click();
@@ -92,6 +107,20 @@ function render() {
 
     append(about)
 
+    const popup = `
+    <div id="popup" class="hidden">
+        <div class="createpost">
+            <div class="close" onclick="document.getElementById('popup').classList.add('hidden')"></div>
+            <span class="ltext ctext bold">Uploading</span>
+            <div class="fullline"></div>
+            <div class="fullwidth"><div class="loading"><div></div><div></div><div></div><div></div></div></div>
+            <span class="message ctext" style="padding-top: 10px"></span>
+        </div>
+    </div>
+    `
+
+    append(popup)
+
 }
 
 async function logout_button() {