From a8386d6c977861391b03539548b6737d4ead58a7 Mon Sep 17 00:00:00 2001
From: "Daniel J. Summers" <daniel@bitbadger.solutions>
Date: Tue, 26 Jul 2022 22:34:19 -0400
Subject: [PATCH] Add loading indicator for admin theme (#25)

---
 src/admin-theme/_layout.liquid    |  1 +
 src/admin-theme/layout.liquid     |  2 +-
 src/admin-theme/wwwroot/admin.css | 22 ++++++++++++++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)
diff --git a/src/admin-theme/_layout.liquid b/src/admin-theme/_layout.liquid
index 78f2495..bf2418c 100644
--- a/src/admin-theme/_layout.liquid
+++ b/src/admin-theme/_layout.liquid
@@ -51,6 +51,7 @@
   </nav>
 </header>
 <main class="mx-3 mt-3">
+  <div class="load-overlay p-5" id="loadOverlay"><h1 class="p-3">Loading&hellip;</h1></div>
   <div class="messages mt-2" id="msgContainer">
     {% for msg in messages %}
       <div role="alert" class="alert alert-{{ msg.level }} alert-dismissible fade show">
diff --git a/src/admin-theme/layout.liquid b/src/admin-theme/layout.liquid
index a556a5b..e3b7aac 100644
--- a/src/admin-theme/layout.liquid
+++ b/src/admin-theme/layout.liquid
@@ -8,7 +8,7 @@
           integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     <link rel="stylesheet" href="{{ "themes/admin/admin.css" | relative_link }}">
   </head>
-  <body hx-boost="true">
+  <body hx-boost="true" hx-indicator="#loadOverlay">
     {% include_template "_layout" %}
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
diff --git a/src/admin-theme/wwwroot/admin.css b/src/admin-theme/wwwroot/admin.css
index b8ab082..18ef79f 100644
--- a/src/admin-theme/wwwroot/admin.css
+++ b/src/admin-theme/wwwroot/admin.css
@@ -92,3 +92,25 @@ a.text-danger:link:hover, a.text-danger:visited:hover {
   border-radius: .5rem;
   padding: .5rem;
 }
+.load-overlay {
+  position: fixed;
+  background-color: rgba(0, 0, 0, .25);
+  color: white;
+  z-index: 100;
+  display: none;
+  top: 55px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: ease-in-out .5s;
+}
+.load-overlay h1 {
+  background-color: rgba(0, 0, 0, .75);
+  height: fit-content;
+  border: solid 6px white;
+  border-radius: .5rem;
+}
+.load-overlay.htmx-request {
+  display: flex;
+  flex-flow: row;
+}
