Implement nicer loading indicator

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;

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