Add loading things and success toast

Signed-off-by: AKP <tom@tdpain.net>

6 files changed, 335 insertions, 192 deletions

diff --git a/walrss/internal/http/edit.go b/walrss/internal/http/edit.go
index 8599f07..0c5bd95 100644
--- a/walrss/internal/http/edit.go
+++ b/walrss/internal/http/edit.go
@@ -3,6 +3,7 @@ package http
 import (
 	"github.com/codemicro/walrss/walrss/internal/core"
 	"github.com/codemicro/walrss/walrss/internal/db"
+	"github.com/codemicro/walrss/walrss/internal/http/views"
 	"github.com/codemicro/walrss/walrss/internal/urls"
 	"github.com/gofiber/fiber/v2"
 	"strconv"
@@ -12,7 +13,7 @@ import (
 func (s *Server) editEnabledState(ctx *fiber.Ctx) error {
 	currentUserID := getCurrentUserID(ctx)
 	if currentUserID == "" {
-		return requestStandardSignIn(ctx)
+		return requestFragmentSignIn(ctx, urls.Index)
 	}
 
 	user, err := core.GetUserByID(s.state, currentUserID)
@@ -30,14 +31,18 @@ func (s *Server) editEnabledState(ctx *fiber.Ctx) error {
 		return err
 	}
 
-	ctx.Set("HX-Redirect", urls.Index)
-	return nil
+	fragmentEmitSuccess(ctx)
+	return ctx.SendString((&views.MainPage{
+		EnableDigests: user.Schedule.Active,
+		SelectedDay:   user.Schedule.Day,
+		SelectedTime:  user.Schedule.Hour,
+	}).RenderScheduleCard())
 }
 
 func (s *Server) editTimings(ctx *fiber.Ctx) error {
 	currentUserID := getCurrentUserID(ctx)
 	if currentUserID == "" {
-		return requestStandardSignIn(ctx)
+		return requestFragmentSignIn(ctx, urls.Index)
 	}
 
 	user, err := core.GetUserByID(s.state, currentUserID)
@@ -69,6 +74,10 @@ func (s *Server) editTimings(ctx *fiber.Ctx) error {
 		return err
 	}
 
-	ctx.Set("HX-Redirect", urls.Index)
-	return nil
+	fragmentEmitSuccess(ctx)
+	return ctx.SendString((&views.MainPage{
+		EnableDigests: user.Schedule.Active,
+		SelectedDay:   user.Schedule.Day,
+		SelectedTime:  user.Schedule.Hour,
+	}).RenderScheduleCard())
 }
diff --git a/walrss/internal/http/http.go b/walrss/internal/http/http.go
index cf0589e..603002b 100644
--- a/walrss/internal/http/http.go
+++ b/walrss/internal/http/http.go
@@ -130,3 +130,7 @@ func requestFragmentSignIn(ctx *fiber.Ctx, nextURL string) error {
 	ctx.Set("HX-Redirect", urls.AuthSignIn+"?"+queryParams.Encode())
 	return nil
 }
+
+func fragmentEmitSuccess(ctx *fiber.Ctx) {
+	ctx.Set("HX-Trigger", "successResponse")
+}
diff --git a/walrss/internal/http/views/main.qtpl.html b/walrss/internal/http/views/main.qtpl.html
index 65272ab..60a19eb 100644
--- a/walrss/internal/http/views/main.qtpl.html
+++ b/walrss/internal/http/views/main.qtpl.html
@@ -10,89 +10,49 @@
 
 {% func (p *MainPage) Title() %}{% endfunc %}
 {% func (p *MainPage) Body() %}
-{%= navbar() %}
-
-<div class="container">
-    <h1>My settings</h1>
-
-    <div class="card mt-3">
-        <div class="card-header">
-            Schedule
+<div class="position-fixed top end-0 p-3" style="z-index: 11">
+    <div id="toast" class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="d-flex">
+            <div class="toast-body" id="toastBody">
+                Hello, world! This is a toast message.
+            </div>
+            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
         </div>
-        <div class="card-body">
+    </div>
+</div>
 
-            <div class="mb-2">
-                <input
-                        type="checkbox"
-                        id="enableCheckbox"
-                        name="enable"
-                        {% if p.EnableDigests %}checked{% endif %}
-                        hx-put="{%s= urls.EditEnabledState %}"
-                        hx-indicator="#enableCheckboxIndicator"
-                >
-                <label for="enableCheckbox">Enable digest delivery</label>
-                <i class="ml-2 iconLoading htmx-indicator" id="enableCheckboxIndicator"></i>
-            </div>
+{%= navbar() %}
 
-            <form
-                    class="row row-cols-lg-auto g-3 align-items-center"
-                    hx-put="{%s urls.EditTimings %}"
-                    hx-indicator="#submitScheduleIndicator"
-            >
-                <div class="col-12">
-                    Deliver my digests
-                </div>
+<script>
+    let toast = document.getElementById("toast")
+    let toastBody = document.getElementById("toastBody")
 
-                <div class="col-12">
-                    <label class="visually-hidden" for="daySelection">Day of week</label>
-                    <select
-                            class="form-select"
-                            id="daySelection"
-                            name="day"
-                            {% if !p.EnableDigests %}disabled{% endif %}
-                    >
-                        {% for i := db.SendDaily; i <= db.SendOnSunday; i += 1 %}
-                            <option
-                                    value="{%d int(i) %}"
-                                    {% if p.SelectedDay == i %}selected{% endif %}
-                            >
-                                {% if i != db.SendDaily %}on {% endif %}{%s i.String() %}
-                            </option>
-                        {% endfor %}
-                    </select>
-                </div>
+    function showToast(delay) {
+        new bootstrap.Toast(toast, {delay: delay}).show();
+    }
 
-                <div class="col-12">at</div>
+    function errorHandler() {
+        toastBody.innerText = "Internal error: action incomplete";
+        toast.classList.remove("bg-success")
+        toast.classList.add("bg-danger")
+        showToast(5000)
+    }
 
-                <div class="col-12">
-                    <label class="visually-hidden" for="timeSelection">Time of day</label>
-                    <select
-                            class="form-select"
-                            id="timeSelection"
-                            name="time"
-                            {% if !p.EnableDigests %}disabled{% endif %}
-                    >
-                        {% for i := 0; i <= 23; i += 1 %}
-                            <option
-                                    value="{%d i %}"
-                                    {% if p.SelectedTime == i %}selected{% endif %}
-                            >
-                                {%d i %}:00
-                            </option>
-                        {% endfor %}
-                    </select>
-                </div>
+    document.body.addEventListener("htmx:sendError", errorHandler);
+    document.body.addEventListener("htmx:responseError", errorHandler);
 
-                <div class="col-12">UTC</div>
+    document.body.addEventListener("successResponse", function () {
+        toastBody.innerText = "Success!"
+        toast.classList.remove("bg-danger")
+        toast.classList.add("bg-success")
+        showToast(1500)
+    })
+</script>
 
-                <div class="col-12">
-                    <button type="submit" class="btn btn-primary" {% if !p.EnableDigests %}disabled{% endif %}>Save</button>
-                    <i class="iconLoading align-middle htmx-indicator" style="margin-left: 1rem; width: 2rem;" id="submitScheduleIndicator"></i>
-                </div>
-            </form>
+<div class="container">
+    <h1>My settings</h1>
 
-        </div>
-    </div>
+    {%= p.RenderScheduleCard() %}
 
     <div class="card mt-3">
         <div class="card-header">
@@ -134,4 +94,97 @@
     </div>
 
 </div>
+{% endfunc %}
+
+{% func (p *MainPage) RenderScheduleCard() %}
+<div class="card mt-3" id="scheduleCard" hx-target="this" hx-swap="outerHTML">
+    <div class="card-header">
+        Schedule
+    </div>
+    <div class="card-body">
+
+        <div class="mb-2 row row-cols-lg-auto align-items-center">
+            <div class="col-12">
+                <input
+                        type="checkbox"
+                        id="enableCheckbox"
+                        name="enable"
+                        {% if p.EnableDigests %}checked{% endif %}
+                        hx-put="{%s= urls.EditEnabledState %}"
+                        hx-indicator="#enableCheckboxIndicator"
+                >
+                <label for="enableCheckbox">Enable digest delivery</label>
+            </div>
+
+            <div class="col-12">
+                <div class="spinner-border spinner-border-sm request-indicator align-middle" style="width: 1rem; height: 1rem;" role="status" id="enableCheckboxIndicator">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+        </div>
+
+        <form
+                class="row row-cols-lg-auto g-3 align-items-center"
+                hx-put="{%s urls.EditTimings %}"
+                hx-indicator="#submitScheduleIndicator"
+        >
+            <div class="col-12">
+                Deliver my digests
+            </div>
+
+            <div class="col-12">
+                <label class="visually-hidden" for="daySelection">Day of week</label>
+                <select
+                        class="form-select"
+                        id="daySelection"
+                        name="day"
+                        {% if !p.EnableDigests %}disabled{% endif %}
+                >
+                    {% for i := db.SendDaily; i <= db.SendOnSunday; i += 1 %}
+                    <option
+                            value="{%d int(i) %}"
+                            {% if p.SelectedDay == i %}selected{% endif %}
+                    >
+                        {% if i != db.SendDaily %}on {% endif %}{%s i.String() %}
+                    </option>
+                    {% endfor %}
+                </select>
+            </div>
+
+            <div class="col-12">at</div>
+
+            <div class="col-12">
+                <label class="visually-hidden" for="timeSelection">Time of day</label>
+                <select
+                        class="form-select"
+                        id="timeSelection"
+                        name="time"
+                        {% if !p.EnableDigests %}disabled{% endif %}
+                >
+                    {% for i := 0; i <= 23; i += 1 %}
+                    <option
+                            value="{%d i %}"
+                            {% if p.SelectedTime == i %}selected{% endif %}
+                    >
+                        {%d i %}:00
+                    </option>
+                    {% endfor %}
+                </select>
+            </div>
+
+            <div class="col-12">UTC</div>
+
+            <div class="col-12">
+                <button type="submit" class="btn btn-primary" {% if !p.EnableDigests %}disabled{% endif %}>Save</button>
+            </div>
+
+            <div class="col-12">
+                <div class="spinner-border align-middle request-indicator" id="submitScheduleIndicator" style="width: 2rem; height: 2rem;" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+        </form>
+
+    </div>
+</div>
 {% endfunc %}
\ No newline at end of file
diff --git a/walrss/internal/http/views/main.qtpl.html.go b/walrss/internal/http/views/main.qtpl.html.go
index a6c7b1b..d18a5ac 100644
--- a/walrss/internal/http/views/main.qtpl.html.go
+++ b/walrss/internal/http/views/main.qtpl.html.go
@@ -44,20 +44,121 @@ func (p *MainPage) Title() string {
 
 func (p *MainPage) StreamBody(qw422016 *qt422016.Writer) {
 	qw422016.N().S(`
+<div class="position-fixed top end-0 p-3" style="z-index: 11">
+    <div id="toast" class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="d-flex">
+            <div class="toast-body" id="toastBody">
+                Hello, world! This is a toast message.
+            </div>
+            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+    </div>
+</div>
+
 `)
 	streamnavbar(qw422016)
 	qw422016.N().S(`
 
+<script>
+    let toast = document.getElementById("toast")
+    let toastBody = document.getElementById("toastBody")
+
+    function showToast(delay) {
+        new bootstrap.Toast(toast, {delay: delay}).show();
+    }
+
+    function errorHandler() {
+        toastBody.innerText = "Internal error: action incomplete";
+        toast.classList.remove("bg-success")
+        toast.classList.add("bg-danger")
+        showToast(5000)
+    }
+
+    document.body.addEventListener("htmx:sendError", errorHandler);
+    document.body.addEventListener("htmx:responseError", errorHandler);
+
+    document.body.addEventListener("successResponse", function () {
+        toastBody.innerText = "Success!"
+        toast.classList.remove("bg-danger")
+        toast.classList.add("bg-success")
+        showToast(1500)
+    })
+</script>
+
 <div class="container">
     <h1>My settings</h1>
 
+    `)
+	p.StreamRenderScheduleCard(qw422016)
+	qw422016.N().S(`
+
     <div class="card mt-3">
         <div class="card-header">
-            Schedule
+            Feeds
         </div>
         <div class="card-body">
 
-            <div class="mb-2">
+            <table class="table">
+                <thead>
+                <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">First</th>
+                    <th scope="col">Last</th>
+                    <th scope="col">Handle</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <th scope="row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                    <td>@mdo</td>
+                </tr>
+                <tr>
+                    <th scope="row">2</th>
+                    <td>Jacob</td>
+                    <td>Thornton</td>
+                    <td>@fat</td>
+                </tr>
+                <tr>
+                    <th scope="row">3</th>
+                    <td colspan="2">Larry the Bird</td>
+                    <td>@twitter</td>
+                </tr>
+                </tbody>
+            </table>
+
+        </div>
+    </div>
+
+</div>
+`)
+}
+
+func (p *MainPage) WriteBody(qq422016 qtio422016.Writer) {
+	qw422016 := qt422016.AcquireWriter(qq422016)
+	p.StreamBody(qw422016)
+	qt422016.ReleaseWriter(qw422016)
+}
+
+func (p *MainPage) Body() string {
+	qb422016 := qt422016.AcquireByteBuffer()
+	p.WriteBody(qb422016)
+	qs422016 := string(qb422016.B)
+	qt422016.ReleaseByteBuffer(qb422016)
+	return qs422016
+}
+
+func (p *MainPage) StreamRenderScheduleCard(qw422016 *qt422016.Writer) {
+	qw422016.N().S(`
+<div class="card mt-3" id="scheduleCard" hx-target="this" hx-swap="outerHTML">
+    <div class="card-header">
+        Schedule
+    </div>
+    <div class="card-body">
+
+        <div class="mb-2 row row-cols-lg-auto align-items-center">
+            <div class="col-12">
                 <input
                         type="checkbox"
                         id="enableCheckbox"
@@ -73,162 +174,132 @@ func (p *MainPage) StreamBody(qw422016 *qt422016.Writer) {
                         hx-indicator="#enableCheckboxIndicator"
                 >
                 <label for="enableCheckbox">Enable digest delivery</label>
-                <i class="ml-2 iconLoading htmx-indicator" id="enableCheckboxIndicator"></i>
             </div>
 
-            <form
-                    class="row row-cols-lg-auto g-3 align-items-center"
-                    hx-put="`)
+            <div class="col-12">
+                <div class="spinner-border spinner-border-sm request-indicator align-middle" style="width: 1rem; height: 1rem;" role="status" id="enableCheckboxIndicator">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+        </div>
+
+        <form
+                class="row row-cols-lg-auto g-3 align-items-center"
+                hx-put="`)
 	qw422016.E().S(urls.EditTimings)
 	qw422016.N().S(`"
-                    hx-indicator="#submitScheduleIndicator"
-            >
-                <div class="col-12">
-                    Deliver my digests
-                </div>
+                hx-indicator="#submitScheduleIndicator"
+        >
+            <div class="col-12">
+                Deliver my digests
+            </div>
 
-                <div class="col-12">
-                    <label class="visually-hidden" for="daySelection">Day of week</label>
-                    <select
-                            class="form-select"
-                            id="daySelection"
-                            name="day"
-                            `)
+            <div class="col-12">
+                <label class="visually-hidden" for="daySelection">Day of week</label>
+                <select
+                        class="form-select"
+                        id="daySelection"
+                        name="day"
+                        `)
 	if !p.EnableDigests {
 		qw422016.N().S(`disabled`)
 	}
 	qw422016.N().S(`
-                    >
-                        `)
+                >
+                    `)
 	for i := db.SendDaily; i <= db.SendOnSunday; i += 1 {
 		qw422016.N().S(`
-                            <option
-                                    value="`)
+                    <option
+                            value="`)
 		qw422016.N().D(int(i))
 		qw422016.N().S(`"
-                                    `)
+                            `)
 		if p.SelectedDay == i {
 			qw422016.N().S(`selected`)
 		}
 		qw422016.N().S(`
-                            >
-                                `)
+                    >
+                        `)
 		if i != db.SendDaily {
 			qw422016.N().S(`on `)
 		}
 		qw422016.E().S(i.String())
 		qw422016.N().S(`
-                            </option>
-                        `)
+                    </option>
+                    `)
 	}
 	qw422016.N().S(`
-                    </select>
-                </div>
+                </select>
+            </div>
 
-                <div class="col-12">at</div>
+            <div class="col-12">at</div>
 
-                <div class="col-12">
-                    <label class="visually-hidden" for="timeSelection">Time of day</label>
-                    <select
-                            class="form-select"
-                            id="timeSelection"
-                            name="time"
-                            `)
+            <div class="col-12">
+                <label class="visually-hidden" for="timeSelection">Time of day</label>
+                <select
+                        class="form-select"
+                        id="timeSelection"
+                        name="time"
+                        `)
 	if !p.EnableDigests {
 		qw422016.N().S(`disabled`)
 	}
 	qw422016.N().S(`
-                    >
-                        `)
+                >
+                    `)
 	for i := 0; i <= 23; i += 1 {
 		qw422016.N().S(`
-                            <option
-                                    value="`)
+                    <option
+                            value="`)
 		qw422016.N().D(i)
 		qw422016.N().S(`"
-                                    `)
+                            `)
 		if p.SelectedTime == i {
 			qw422016.N().S(`selected`)
 		}
 		qw422016.N().S(`
-                            >
-                                `)
+                    >
+                        `)
 		qw422016.N().D(i)
 		qw422016.N().S(`:00
-                            </option>
-                        `)
+                    </option>
+                    `)
 	}
 	qw422016.N().S(`
-                    </select>
-                </div>
+                </select>
+            </div>
 
-                <div class="col-12">UTC</div>
+            <div class="col-12">UTC</div>
 
-                <div class="col-12">
-                    <button type="submit" class="btn btn-primary" `)
+            <div class="col-12">
+                <button type="submit" class="btn btn-primary" `)
 	if !p.EnableDigests {
 		qw422016.N().S(`disabled`)
 	}
 	qw422016.N().S(`>Save</button>
-                    <i class="iconLoading align-middle htmx-indicator" style="margin-left: 1rem; width: 2rem;" id="submitScheduleIndicator"></i>
-                </div>
-            </form>
-
-        </div>
-    </div>
-
-    <div class="card mt-3">
-        <div class="card-header">
-            Feeds
-        </div>
-        <div class="card-body">
+            </div>
 
-            <table class="table">
-                <thead>
-                <tr>
-                    <th scope="col">#</th>
-                    <th scope="col">First</th>
-                    <th scope="col">Last</th>
-                    <th scope="col">Handle</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr>
-                    <th scope="row">1</th>
-                    <td>Mark</td>
-                    <td>Otto</td>
-                    <td>@mdo</td>
-                </tr>
-                <tr>
-                    <th scope="row">2</th>
-                    <td>Jacob</td>
-                    <td>Thornton</td>
-                    <td>@fat</td>
-                </tr>
-                <tr>
-                    <th scope="row">3</th>
-                    <td colspan="2">Larry the Bird</td>
-                    <td>@twitter</td>
-                </tr>
-                </tbody>
-            </table>
+            <div class="col-12">
+                <div class="spinner-border align-middle request-indicator" id="submitScheduleIndicator" style="width: 2rem; height: 2rem;" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+        </form>
 
-        </div>
     </div>
-
 </div>
 `)
 }
 
-func (p *MainPage) WriteBody(qq422016 qtio422016.Writer) {
+func (p *MainPage) WriteRenderScheduleCard(qq422016 qtio422016.Writer) {
 	qw422016 := qt422016.AcquireWriter(qq422016)
-	p.StreamBody(qw422016)
+	p.StreamRenderScheduleCard(qw422016)
 	qt422016.ReleaseWriter(qw422016)
 }
 
-func (p *MainPage) Body() string {
+func (p *MainPage) RenderScheduleCard() string {
 	qb422016 := qt422016.AcquireByteBuffer()
-	p.WriteBody(qb422016)
+	p.WriteRenderScheduleCard(qb422016)
 	qs422016 := string(qb422016.B)
 	qt422016.ReleaseByteBuffer(qb422016)
 	return qs422016
diff --git a/walrss/internal/http/views/page.qtpl.html b/walrss/internal/http/views/page.qtpl.html
index f885de9..9e9c0c2 100644
--- a/walrss/internal/http/views/page.qtpl.html
+++ b/walrss/internal/http/views/page.qtpl.html
@@ -15,19 +15,22 @@ Page prints a page implementing Page interface.
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.7.0"></script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
     <style>
         [disabled] {
             cursor: not-allowed;
         }
 
-        i.iconLoading {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='64px' viewBox='0 0 128 128' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z' fill='%23000000'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-size: cover;
-            display: inline-block;
-            width: 1rem;
-            aspect-ratio: 1/1;
+        .request-indicator {
+            display:none;
         }
+        .htmx-request .request-indicator{
+            display: block;
+        }
+        .htmx-request.request-indicator{
+            display: block;
+        }
+
     </style>
     {%= p.HeadContent() %}
 </head>
diff --git a/walrss/internal/http/views/page.qtpl.html.go b/walrss/internal/http/views/page.qtpl.html.go
index 4d53006..b0900f9 100644
--- a/walrss/internal/http/views/page.qtpl.html.go
+++ b/walrss/internal/http/views/page.qtpl.html.go
@@ -39,19 +39,22 @@ func StreamRenderPage(qw422016 *qt422016.Writer, p Page) {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://unpkg.com/htmx.org@1.7.0"></script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
     <style>
         [disabled] {
             cursor: not-allowed;
         }
 
-        i.iconLoading {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='64px' height='64px' viewBox='0 0 128 128' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z' fill='%23000000'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-size: cover;
-            display: inline-block;
-            width: 1rem;
-            aspect-ratio: 1/1;
+        .request-indicator {
+            display:none;
         }
+        .htmx-request .request-indicator{
+            display: block;
+        }
+        .htmx-request.request-indicator{
+            display: block;
+        }
+
     </style>
     `)
 	p.StreamHeadContent(qw422016)