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)]