Lightweight loading button

public/img/hourglass-half-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M32 0C14.3 0 0 14.3 0 32S14.3 64 32 64V75c0 42.4 16.9 83.1 46.9 113.1L146.7 256 78.9 323.9C48.9 353.9 32 394.6 32 437v11c-17.7 0-32 14.3-32 32s14.3 32 32 32H64 320h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V437c0-42.4-16.9-83.1-46.9-113.1L237.3 256l67.9-67.9c30-30 46.9-70.7 46.9-113.1V64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320 64 32zM96 75V64H288V75c0 19-5.6 37.4-16 53H112c-10.3-15.6-16-34-16-53zm16 309c3.5-5.3 7.6-10.3 12.1-14.9L192 301.3l67.9 67.9c4.6 4.6 8.6 9.6 12.1 14.9H112z"/></svg>

public/index.html

@@ -1718,7 +1718,9 @@
                 </div>
                 <textarea id="send_textarea" placeholder="Not connected to API!" name="text"></textarea>
                 <div id="send_but_sheld">
-                    <div id="loading_mes"></div>
+                    <div id="loading_mes">
+                        <img alt="" class="svg_icon" src="img/hourglass-half-solid.svg" />
+                    </div>
                     <input id="send_but" type="button">
                 </div>
             </form>

public/script.js

@@ -1924,7 +1924,7 @@ function activateSendButtons() {
 
 function deactivateSendButtons() {
     $("#send_but").css("display", "none");
-    $("#loading_mes").css("display", "inline-block");
+    $("#loading_mes").css("display", "flex");
 }
 
 function resetChatState() {

public/scripts/extensions/caption/style.css

@@ -22,15 +22,3 @@
 #img_form {
     display: none;
 }
-
-.spin {
-    animation-name: spin;
-    animation-duration: 2000ms;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-}
-
-@keyframes spin {
-    from {transform:rotate(0deg);}
-    to {transform:rotate(360deg);}
-}

public/style.css

@@ -268,11 +268,15 @@ code {
     width: 40px;
     height: 40px;
     margin: 0 auto;
-    /*margin-left: 2px;*/
-    background: url('img/load.svg') no-repeat;
-    background-size: 26px 26px;
-    background-position: center center;
     order: 99999;
+    align-items: center;
+    justify-content: center;
+    filter: brightness(0.7);
+}
+
+#loading_mes .svg_icon {
+    width: 24px;
+    height: 24px;
 }
 
 #options_button {
@@ -3398,3 +3402,15 @@ body.no-blur #select_chat_popup {
 
     }
 }
+
+.spin {
+    animation-name: spin;
+    animation-duration: 2000ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes spin {
+    from {transform:rotate(0deg);}
+    to {transform:rotate(360deg);}
+}