Use loading indicator provided by bulma

src/cljs/airsonic_ui/views/breadcrumbs.cljs

@@ -1,7 +1,6 @@
 (ns airsonic-ui.views.breadcrumbs
   (:require [re-frame.core :refer [subscribe]]
-            [airsonic-ui.routes :as routes :refer [url-for]]
+            [airsonic-ui.routes :as routes :refer [url-for]]))
-            [airsonic-ui.views.loading-spinner :refer [loading-spinner]]))
 
 ;; Breadcrumbs are implemented in such a way that they provide a stringent
 ;; hierarchy no matter how you came to the url. They should allow easy
@@ -15,7 +14,7 @@
        (for [[idx [href label]] (map-indexed vector (butlast items))]
          [:li {:key idx} [:a {:href href} label]])
        [:li.is-active>a (last items)
-        (when content-pending? [loading-spinner])]]]]))
+        (when content-pending? [:span.loader])]]]]))
 
 (defmulti breadcrumbs
   (fn dispatch-on [[route-id] content] route-id))

src/cljs/airsonic_ui/views/loading_spinner.cljs

@@ -1,5 +0,0 @@
-(ns airsonic-ui.views.loading-spinner
-  (:require [airsonic-ui.views.icon :refer [icon]]))
-
-(defn loading-spinner []
-  [:span.loading-spinner [icon :reload]])

src/sass/app.sass

@@ -17,6 +17,11 @@
   .loader
     +loader
 
+// small loading indicator at top of content
+.breadcrumb
+  .loader
+    margin-left: .5em
+
 // bottom bar
 .has-navbar-fixed-bottom
   padding-bottom: 64px
@@ -189,7 +194,6 @@
   .media-content
     align-self: center
 
-
 // floating notifications
 .notifications:not(:empty)
   @extend .container
@@ -199,21 +203,6 @@
   right: 0
   padding-top: 3.2rem
 
-// loading indicator
-@keyframes you-spin-my-head-right-round
-  from
-    transform: rotate(0deg)
-    transform-origin: 50% 46%
-
-  to
-    transform: rotate(359deg)
-    transform-origin: 50% 46%
-
-.loading-spinner
-  .icon
-    animation: 1s infinite you-spin-my-head-right-round
-
-
 // route specific styling
 .search
   .content .section