From 67ecaf3e270dc871ea994bbe4caadfddf157e421 Mon Sep 17 00:00:00 2001
From: lois <lois@procolix.eu>
Date: Tue, 18 Mar 2025 16:58:03 +0100
Subject: [PATCH] Spinner shows when deploy is clicked
---
panel/src/panel/static/style.sass | 8 +++++++-
panel/src/panel/templates/base.html | 1 +
panel/src/panel/templates/configuration_form.html | 11 +++++++++--
3 files changed, 17 insertions(+), 3 deletions(-)
diff --git a/panel/src/panel/static/style.sass b/panel/src/panel/static/style.sass
index edeedf17..220d6a0f 100644
--- a/panel/src/panel/static/style.sass
+++ b/panel/src/panel/static/style.sass
@@ -8,7 +8,7 @@ body
width: 48px
height: 48px
border: 5px solid #000
- border-bottom-color: #FF3D00
+ border-bottom-color: #F34508
border-radius: 50%
display: inline-block
box-sizing: border-box
@@ -24,3 +24,9 @@ body
left: 50%
transform: translate(-50%, -50%)
display: block
+
+.htmx-indicator
+ display: none
+
+.htmx-request .htmx-indicator
+ display: inline-block
diff --git a/panel/src/panel/templates/base.html b/panel/src/panel/templates/base.html
index 913b19fb..b2c80e80 100644
--- a/panel/src/panel/templates/base.html
+++ b/panel/src/panel/templates/base.html
@@ -5,6 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
{% load compress %}
{% compress css %}
diff --git a/panel/src/panel/templates/configuration_form.html b/panel/src/panel/templates/configuration_form.html
index e8665309..1c33ff3c 100644
--- a/panel/src/panel/templates/configuration_form.html
+++ b/panel/src/panel/templates/configuration_form.html
@@ -5,10 +5,17 @@
{{ form.as_p }}
- <button class="button" type="submit" name="deploy">Deploy</button>
+ <button id="deploy-button" class="button"
+ hx-post="{% url 'configuration_form' %}"
+ hx-trigger="click"
+ hx-indicator="#spinner-container">
+ Deploy
+ <span class="htmx-indicator loader"></span>
+ </button>
+
<button class="button" type="submit" name="save">Save</button>
- <div id="spinner-container">
+ <div id="spinner-container" class="htmx-indicator">
<span class="loader"></span>
</div>
</form>