feat(frontend): Use a more general loading icon component

src/frontend/tau/components/comments.cljs

@@ -51,7 +51,7 @@
         [comment-item (assoc comment :key i) author-name author-avatar])]
      (when (:url next-page)
        (if pagination-loading?
-         (loading/comments-pagination-loading-icon service-color)
+         (loading/loading-icon service-color)
          [:div.flex.items-center.justify-center
           {:style {:cursor "pointer"}
            :on-click #(rf/dispatch [::events/comments-pagination url (:url next-page)])}

src/frontend/tau/components/loading.cljs

@@ -1,20 +1,8 @@
 (ns tau.components.loading)
 
-(defn page-loading-icon
-  [service-color]
-  [:div.w-full.flex.justify-center.items-center.flex-auto
-   [:i.fas.fa-circle-notch.fa-spin.text-5xl
-    {:style {:color service-color}}]])
-
-(defn items-pagination-loading-icon
-  [service-color loading?]
-  [:div.w-full.flex.items-center.justify-center.py-4
-   {:class (when-not loading? "invisible")}
-   [:i.fas.fa-circle-notch.fa-spin.text-2xl
-    {:style {:color service-color}}]])
-
-(defn comments-pagination-loading-icon
-  [service-color]
+(defn loading-icon
+  [service-color & styles]
   [:div.w-full.flex.justify-center.items-center.flex-auto
    [:i.fas.fa-circle-notch.fa-spin
-    {:style {:color service-color}}]])
+    {:class (apply str (if (> (count styles) 1) (interpose " " styles) styles))
+     :style {:color service-color}}]])

src/frontend/tau/views/channel.cljs

@@ -20,8 +20,8 @@
       (rf/dispatch [::events/channel-pagination url next-page-url]))
     [:div.flex.flex-col.items-center.px-5.py-2.flex-auto
      (if page-loading?
-       [loading/page-loading-icon service-color]
-       [:div.flex.flex-col {:class "w-4/5"}
+       [loading/loading-icon service-color "text-5xl"]
+       [:div.flex.flex-col.flex-auto {:class "ml:w-4/5"}
         [navigation/back-button service-color]
         (when banner
           [:div

src/frontend/tau/views/kiosk.cljs

@@ -18,7 +18,7 @@
       (rf/dispatch [::events/kiosk-pagination serviceId id next-page-url]))
     [:div.flex.flex-col.items-center.px-5.py-2.flex-auto
      (if page-loading?
-       [loading/page-loading-icon service-color]
+       [loading/loading-icon service-color "text-5xl"]
        [:div.flex.flex-col.flex-auto.w-full {:class "lg:w-4/5"}
         [:div.flex.justify-center.items-center.my-4.mx-2
          [:div.m-4

src/frontend/tau/views/playlist.cljs

@@ -21,8 +21,8 @@
       (rf/dispatch [::events/playlist-pagination url next-page-url]))
     [:div.flex.flex-col.items-center.px-5.pt-4.flex-auto
      (if page-loading?
-       [loading/page-loading-icon service-color]
-       [:div.flex.flex-col.flex-auto.w-full {:class "lg:w-4/5"}
+       [loading/loading-icon service-color "text-5xl"]
+       [:div.flex.flex-col.flex-auto.w-full {:class "ml:w-4/5"}
         [navigation/back-button service-color]
         (when banner-url
           [:div

src/frontend/tau/views/search.cljs

@@ -23,6 +23,6 @@
       [:h2 (str "Showing search results for: \"" q "\"")]
       [:h1 (str "Number of search results: " (count items))]]
      (if page-loading?
-       [loading/page-loading-icon service-color]
+       [loading/loading-icon service-color "text-5xl"]
        [:div.flex.flex-col.flex-auto.w-full {:class "lg:w-4/5"}
         [items/related-streams items next-page-url]])]))

src/frontend/tau/views/stream.cljs

@@ -24,19 +24,19 @@
         service-color @(rf/subscribe [:service-color])]
     [:div.flex.flex-col.items-center.justify-center.text-white.flex-auto
      (if page-loading?
-       [loading/page-loading-icon service-color]
-       [:div.w-full {:class "md:w-4/5 xl:w-3/5"}
+       [loading/loading-icon service-color "text-5xl"]
+       [:div.w-full.pb-4 {:class "ml:w-4/5 xl:w-3/5"}
         [navigation/back-button service-color]
         [:div.flex.justify-center.relative
          {:style {:background (str "center / cover no-repeat url('" thumbnail-url"')")}
-          :class "md:h-[450px] lg:h-[600px]"}
+          :class "ml:h-[450px] lg:h-[600px]"}
          [:video.bottom-0.object-cover.max-h-full.min-w-full
           {:src stream-type :controls true}]]
-        [:div.px-4.md:p-0
+        [:div.px-4.ml:p-0
          [:div.flex.flex.w-full.mt-3.justify-center
           [:button.border.rounded.border-black.px-3.py-1.bg-stone-800
            {:on-click #(rf/dispatch [::events/switch-to-global-player
-                                     {:uploader-name uploader-author :uploader-url uploader-url
+                                     {:uploader-name uploader-name :uploader-url uploader-url
                                       :name name :url url :stream stream-type :service-color service-color}])}
            [:i.fa-solid.fa-headphones]]
           [:a {:href url}
@@ -95,9 +95,9 @@
                                             :style {:cursor "pointer"}}])]
            [:div
             (if show-comments-loading
-              [loading/page-loading-icon service-color]
+              [loading/loading-icon service-color "text-2xl"]
               (when (and show-comments comments-page)
-                [comments/comments comments-page uploader-author uploader-avatar url]))]]
+                [comments/comments comments-page uploader-name uploader-avatar url]))]]
           (when-not (empty? related-streams)
             [:div.py-3
              [:div.flex.items-center