From 6950609ff01fe81d9ac8f70f05b14cca4dac4c35 Mon Sep 17 00:00:00 2001
From: Piyush Mishra <piyush.raj.kit@gmail.com>
Date: Wed, 26 May 2021 08:52:53 +0530
Subject: [PATCH] image loading

---
 static/css/style.css | 10 ++++++++++
 static/index.html    |  9 ++++++---
 static/js/images.js  |  6 ++++--
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index af846f7..8c80a68 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -261,6 +261,16 @@ input {
     background-color: var(--bg-secondary-color);
 }
 
+.clip-win.progress-clip {
+    width: 80px;
+    height: 80px;
+    border-radius:  10px;
+    bottom: unset;
+    top: 55px;
+    left: 50%;
+    margin-left: -40px;
+}
+
 .clip-win.reply-clip {
     width: calc(100% - 2*8px - 3*5px);
     max-width: 720px;
diff --git a/static/index.html b/static/index.html
index fa9c7c8..3b10df2 100644
--- a/static/index.html
+++ b/static/index.html
@@ -146,7 +146,10 @@
         </div>
     </div>
 
-    
+    <!-- Progress Clip -->
+    <div  id="progress_clip" class="clip-win progress-clip is-hidden">
+        <img src="img/loading.svg" class="svg-filter">
+    </div>
 
     <!-- Reply Clip -->
     <div  id="reply_clip" class="clip-win reply-clip is-hidden">
@@ -249,13 +252,13 @@
         </footer>
     </div>
     <script>
-        window.onerror = function(message, source, lineno, colno) {
+       /* window.onerror = function(message, source, lineno, colno) {
             var msg = 'Error: \n';
             msg += source + '\n';
             msg += lineno+':' + colno + '\n';
             msg += message + '\n';
             alert(msg);
-        }
+        } */
     </script>
     <script src="js/jquery-3.5.1.min.js"></script>
     <script src="js/taphold.js"></script>
diff --git a/static/js/images.js b/static/js/images.js
index 8aa1d65..d2dab5f 100644
--- a/static/js/images.js
+++ b/static/js/images.js
@@ -5,6 +5,8 @@ let Images = class {
             if (!file) {
                 return;
             }
+            $('#progress_clip').removeClass('is-hidden');
+            $('#action_clip').addClass('is-hidden');
             Images.compressImage(file, 0.1, 'image/webp');
         });
     }    
@@ -19,6 +21,7 @@ let Images = class {
                 reader.readAsDataURL(result); 
                 reader.onloadend = function() {
                     var base64data = reader.result;
+                    console.log('a')
                     if(base64data.length > 63488 && mime != 'image/jpeg') {
                         base64data = null;
                         result = null;
@@ -32,12 +35,11 @@ let Images = class {
                         }; dialog(prop, function() {});
                         return;
                     }
-                    
                     socket.send(JSON.stringify({
                         cmd: "img",
                         src: base64data
                     }));
-                    $('#action_clip').addClass('is-hidden');
+                    $('#progress_clip').addClass('is-hidden');
                 }
             },
         });