fix

views/chat.html

@@ -1,12 +1,14 @@
-<div class="chat-container mt-5" style="padding-bottom: 155px;">
+<div class="chat-container mt-5" style="padding-bottom: 155px;" hx-indicator="#textarea-control">
     <hx hx-get="/loadChat" hx-trigger="load once" hx-swap="outerHTML"></hx>
 
     {% if IsSubscribed or not IsLimiteReached %}
     <div class="chat-input-container mb-5">
         <div class="textarea-wrapper">
-            <textarea {% if not IsLogin or not HaveKey %}disabled{% endif %} class="textarea has-fixed-size"
-                placeholder="Type your message here..." name="message" oninput="toggleSendButton()"
-                id="chat-input-textarea"></textarea>
+            <div class="control" id="textarea-control">
+                <textarea {% if not IsLogin or not HaveKey %}disabled{% endif %} class="textarea has-fixed-size"
+                    placeholder="Type your message here..." name="message" oninput="toggleSendButton()"
+                    id="chat-input-textarea"></textarea>
+            </div>
             <div class="button-group">
                 <hx hx-get="/loadSettings" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
                 <hx hx-get="/loadUsageKPI" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
@@ -39,6 +41,17 @@
 </div>
 
 <script>
+    var textareaControl = document.getElementById('textarea-control');
+
+    // Every 0.1s check if the text area have htmx-request class, if yes, add the class is-loading
+    setInterval(function () {
+        if (textareaControl.classList.contains('htmx-request')) {
+            textareaControl.classList.add('is-loading');
+        } else {
+            textareaControl.classList.remove('is-loading');
+        }
+    }, 10);
+
     document.getElementById('chat-input-textarea').addEventListener('focus', function () {
         var buttons = document.getElementsByClassName('to-reduce-opacity');
         for (var i = 0; i < buttons.length; i++) {