image upload spinner

3 files changed, 82 insertions, 3 deletions

diff --git a/public/css/main.css b/public/css/main.css
index 0314b3f..4819f38 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -308,6 +308,7 @@ footer {
     background-color: var(--hover);
     flex-shrink: 0;
     image-rendering: crisp-edges;
+    object-fit: cover;
 }
 
 .nb {
@@ -378,4 +379,52 @@ form {
         filter: invert(100%) !important;
         background-color: #bbbbbb !important;
     }
-}
\ No newline at end of file
+}
+
+.fullwidth {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.loading {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.loading div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border: 3px solid var(--text);
+    border-radius: 50%;
+    animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: var(--text) transparent transparent transparent;
+}
+
+.loading div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+
+.loading div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+  
+.loading div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+  
+@keyframes loading {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+}
+  
\ No newline at end of file
diff --git a/public/css/profile.css b/public/css/profile.css
index 4aff91b..8f212dd 100644
--- a/public/css/profile.css
+++ b/public/css/profile.css
@@ -30,6 +30,7 @@ body {
     height: inherit;
     background-color: var(--hover);
     border-radius: 0px 0px 20px 20px;
+    object-fit: cover;
 }
 
 #info {
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() {