From 163a1dbc5f27238f9b59868416e401ed90e6bdc5 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Fri, 29 Mar 2024 20:19:52 +1100
Subject: [PATCH] Disable send request button and display animation when
 request is already started

---
 templates/dashboard/http_functions/client.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/templates/dashboard/http_functions/client.html b/templates/dashboard/http_functions/client.html
index b0d0848..c0ac7aa 100644
--- a/templates/dashboard/http_functions/client.html
+++ b/templates/dashboard/http_functions/client.html
@@ -73,6 +73,7 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
     var RequestClient = {
         // Initialize component state
         init: function () {
+            this.isLoading = false;
             this.method = 'GET';
             this.url = "{{ url_for('execute_http_function', user_id=user_id, function=name) }}";
             this.body = '{}';
@@ -87,6 +88,7 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
             this.queryParams = [{ key: '', value: '' }];
         },
         sendRequest: function () {
+            this.isLoading = true;
             let startTime = performance.now();
             let url = this.url;
             const query = this.queryParams.filter(p => p.key && p.value)
@@ -107,6 +109,7 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
                 headers
             })
                 .then(response => {
+                    this.isLoading = false;
                     let endTime = performance.now();
                     this.duration = endTime - startTime;
                     this.status = response.status;
@@ -139,8 +142,14 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
                     }),
                     m("button.ml-3.px-6.py-2.rounded-md.font-semibold.text-white.bg-orange-500.hover:bg-orange-600", {
                         type: "button",
-                        onclick: () => this.sendRequest()
-                    }, "Send")
+                        onclick: () => this.sendRequest(),
+                        disabled: this.isLoading
+                    }, this.isLoading
+                        ? m("svg", { class: "animate-spin h-5 w-5 text-white", viewBox: "0 0 24 24" },
+                            m("circle", { class: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "4", fill: "none" }),
+                            m("path", { class: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+                        )
+                        : "Send")
                 ]),
                 // Tabs for query params, headers, and body
                 m("div", [