image loading

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;

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>

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');
                 }
             },
         });