add a loading indicator

3 files changed, 47 insertions, 1 deletions

diff --git a/static/misc.css b/static/misc.css
index 6b88e63..4271cbe 100644
--- a/static/misc.css
+++ b/static/misc.css
@@ -80,6 +80,13 @@ span.unreadIndicator {
   }
 }
 
+.htmx-indicator {
+  visibility: hidden;
+  &.htmx-request {
+    visibility: inherit;
+  }
+}
+
 [hidden] {
   display: none;
 }
diff --git a/static/skeleton.css b/static/skeleton.css
index 6526c29..e38f49f 100644
--- a/static/skeleton.css
+++ b/static/skeleton.css
@@ -36,13 +36,20 @@ nav {
   height: 32px;
   box-sizing: border-box;
   display: grid;
-  grid-template-columns: 1fr max-content 1fr;
+  grid-template-columns: 1fr max-content 0 1fr;
   align-items: center;
 
   > * {
     margin: 0 8px;
   }
 
+  #loadingIndicator {
+    width: calc(var(--icon-size) * 0.75);
+    aspect-ratio: 1;
+    position: relative;
+    color: var(--clr-foreground-on-primary);
+  }
+
   > :last-child {
     display: grid;
     grid-template-columns: 1fr max-content;
diff --git a/static/tail-spin.svg b/static/tail-spin.svg
new file mode 100644
index 0000000..3796502
--- /dev/null
+++ b/static/tail-spin.svg
@@ -0,0 +1,32 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+            <stop stop-color="#fff" stop-opacity="0" offset="0%" />
+            <stop stop-color="#fff" stop-opacity=".631" offset="63.146%" />
+            <stop stop-color="#fff" offset="100%" />
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)">
+            <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="0.9s"
+                    repeatCount="indefinite" />
+            </path>
+            <circle fill="#fff" cx="36" cy="18" r="1">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="0.9s"
+                    repeatCount="indefinite" />
+            </circle>
+        </g>
+    </g>
+</svg>
\ No newline at end of file