From 80d0a6e258275c01f8fe6fda9d4eacdc2ba73360 Mon Sep 17 00:00:00 2001
From: arne <noreply@null.arnes.space>
Date: Wed, 19 Nov 2025 13:23:00 +0100
Subject: [PATCH] Implement nicer loading indicator

---
 public/index.html                        | 31 ++++++++++++++++++++++++
 src/computersandblues/lodestone/app.cljs |  3 ++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 199534f..941fb80 100644
--- a/public/index.html
+++ b/public/index.html
@@ -106,6 +106,37 @@
          width: 80%;
      }
 
+     section.posts .controls .loading-indicator {
+         width: 20px;
+         height: 20px;
+         vertical-align: middle;
+         margin-left: 16px;
+         overflow: visible;
+     }
+
+     section.posts .controls .loading-indicator .arc {
+         /* svg */
+         fill: transparent;
+         stroke-width: 20;
+         stroke-linecap: round;
+         stroke-linejoin: round;
+         stroke: #dccb8b;
+         animation: spin 2s ease-in-out infinite;
+         transform-origin: 50px 50px;
+     }
+
+     @keyframes spin {
+         100% {
+             transform: rotate(360deg);
+         }
+     }
+
+     section.posts .controls .buttons {
+         display: flex;
+         justify-content: end;
+         flex-wrap: wrap;
+     }
+
      @media screen and (min-width: 640px) {
          section.posts .controls {
              display: grid;
diff --git a/src/computersandblues/lodestone/app.cljs b/src/computersandblues/lodestone/app.cljs
index 0b19609..f98a6aa 100644
--- a/src/computersandblues/lodestone/app.cljs
+++ b/src/computersandblues/lodestone/app.cljs
@@ -390,10 +390,11 @@
               (str ", displaying " (count displayed-posts) (when query " matches"))))]
       [:section.search-form
        [search]
-       (when (seq loading) " …")
+       [loading-indicator (select-keys posts [:loading])]
        #_(cond (= api-state :loading) " …"
              (= api-state :error) " API Error!")]
       [:section.buttons
+       [:button.control-button {:on-click fetch-more-posts!} "⇓ Fetch more"]
        [:button.control-button {:on-click disconnect-account!} "▤ Disconnect account"]]]
      [:ul.results (map-indexed (fn [idx p]
                                  ^{:key idx} [:li.result [post {:post p}]]) displayed-posts)]