feat(frontend): move loading icon to layout components

src/frontend/tubo/components/audio_player.cljs

@@ -5,7 +5,7 @@
    [reagent.dom :as rdom]
    [re-frame.core :as rf]
    [reitit.frontend.easy :as rfe]
-   [tubo.components.loading :as loading]
+   [tubo.components.layout :as layout]
    [tubo.components.player :as player]
    [tubo.events :as events]
    [tubo.util :as util]))
@@ -66,17 +66,12 @@
       [player/button [:i.fa-solid.fa-backward]
        #(rf/dispatch [::events/set-player-time (- @!elapsed-time 5)])]
       [player/button
-       (if @!player
-         (if loading?
-           [loading/loading-icon service-color "text-2xl"]
-           (if paused?
-             [:i.fa-solid.fa-play
-              {:on-click #(rf/dispatch [::events/player-paused false])}]
-             [:i.fa-solid.fa-pause
-              {:on-click #(rf/dispatch [::events/player-paused true])}]))
-         [:i.fa-solid.fa-play
-          {:on-click #(rf/dispatch [::events/player-paused true])}])
-       nil
+       (if (or loading? (not @!player))
+         [layout/loading-icon service-color "text-2xl"]
+         (if paused?
+           [:i.fa-solid.fa-play]
+           [:i.fa-solid.fa-pause]))
+       #(rf/dispatch [::events/player-paused (not paused?)])
        :show-on-mobile? true
        :extra-styles "lg:text-2xl"]
       [player/button [:i.fa-solid.fa-forward]

src/frontend/tubo/components/comments.cljs

@@ -3,7 +3,6 @@
    [re-frame.core :as rf]
    [reitit.frontend.easy :as rfe]
    [tubo.components.layout :as layout]
-   [tubo.components.loading :as loading]
    [tubo.events :as events]
    [tubo.util :as util]))
 
@@ -71,7 +70,7 @@
               [comment-item (assoc reply :key i :author-name author-name :author-avatar author-avatar)])])])]
      (when (:url next-page)
        (if pagination-loading?
-         (loading/loading-icon service-color)
+         (layout/loading-icon service-color)
          [:div.flex.justify-center
           [layout/secondary-button
            "Show more comments"

src/frontend/tubo/components/items.cljs

@@ -2,7 +2,7 @@
   (:require
    [re-frame.core :as rf]
    [reitit.frontend.easy :as rfe]
-   [tubo.components.loading :as loading]
+   [tubo.components.layout :as layout]
    [tubo.events :as events]
    [tubo.util :as util]))
 
@@ -107,4 +107,4 @@
         (for [[i item] (map-indexed vector related-streams)]
           ^{:key i} [generic-item item service-color bookmarks])])
      (when-not (empty? next-page-url)
-       [loading/loading-icon service-color "text-2xl" (when-not pagination-loading? "invisible")])]))
+       [layout/loading-icon service-color "text-2xl" (when-not pagination-loading? "invisible")])]))

src/frontend/tubo/components/layout.cljs

@@ -1,7 +1,6 @@
 (ns tubo.components.layout
   (:require
-   [re-frame.core :as rf]
-   [tubo.components.loading :as loading]))
+   [re-frame.core :as rf]))
 
 (defn logo []
   [:img.mb-1
@@ -9,6 +8,13 @@
     :style {:maxHeight "25px" :maxWidth "40px"}
     :title "Tubo"}])
 
+(defn loading-icon
+  [service-color & styles]
+  [:div.w-full.flex.justify-center.items-center.flex-auto
+   [:i.fas.fa-circle-notch.fa-spin
+    {:class (apply str (if (> (count styles) 1) (interpose " " styles) styles))
+     :style {:color service-color}}]])
+
 (defn focus-overlay [on-click-cb active?]
   [:div.w-full.fixed.min-h-screen.right-0.top-0.transition-all.delay-75.ease-in-out
    {:class    "bg-black/50"
@@ -22,7 +28,7 @@
         service-color @(rf/subscribe [:service-color])]
     [:div.flex.flex-col.flex-auto.items-center.px-5.py-4
      (if page-loading?
-       [loading/loading-icon service-color "text-5xl"]
+       [loading-icon service-color "text-5xl"]
        [:div.flex.flex-col.flex-auto.w-full {:class "lg:w-4/5 xl:w-3/5"}
         (map-indexed #(with-meta %2 {:key %1}) children)])]))
 

src/frontend/tubo/components/loading.cljs

@@ -1,8 +0,0 @@
-(ns tubo.components.loading)
-
-(defn loading-icon
-  [service-color & styles]
-  [:div.w-full.flex.justify-center.items-center.flex-auto
-   [:i.fas.fa-circle-notch.fa-spin
-    {:class (apply str (if (> (count styles) 1) (interpose " " styles) styles))
-     :style {:color service-color}}]])

src/frontend/tubo/views/channel.cljs

@@ -3,7 +3,6 @@
    [re-frame.core :as rf]
    [tubo.components.items :as items]
    [tubo.components.layout :as layout]
-   [tubo.components.loading :as loading]
    [tubo.events :as events]))
 
 (defn channel
@@ -12,8 +11,6 @@
                 related-streams next-page]} @(rf/subscribe [:channel])
         next-page-url (:url next-page)
         service-color @(rf/subscribe [:service-color])
-        page-loading? @(rf/subscribe [:show-page-loading])
-        pagination-loading? @(rf/subscribe [:show-pagination-loading])
         scrolled-to-bottom? @(rf/subscribe [:scrolled-to-bottom])]
     (when scrolled-to-bottom?
       (rf/dispatch [::events/channel-pagination url next-page-url]))

src/frontend/tubo/views/kiosk.cljs

@@ -3,7 +3,6 @@
    [re-frame.core :as rf]
    [tubo.components.items :as items]
    [tubo.components.layout :as layout]
-   [tubo.components.loading :as loading]
    [tubo.events :as events]))
 
 (defn kiosk

src/frontend/tubo/views/playlist.cljs

@@ -4,7 +4,6 @@
    [reitit.frontend.easy :as rfe]
    [tubo.components.items :as items]
    [tubo.components.layout :as layout]
-   [tubo.components.loading :as loading]
    [tubo.events :as events]))
 
 (defn playlist

src/frontend/tubo/views/search.cljs

@@ -3,7 +3,6 @@
    [re-frame.core :as rf]
    [reitit.frontend.easy :as rfe]
    [tubo.components.items :as items]
-   [tubo.components.loading :as loading]
    [tubo.components.layout :as layout]
    [tubo.events :as events]))
 

src/frontend/tubo/views/stream.cljs

@@ -5,7 +5,6 @@
    [tubo.events :as events]
    [tubo.components.items :as items]
    [tubo.components.layout :as layout]
-   [tubo.components.loading :as loading]
    [tubo.components.comments :as comments]
    [tubo.components.video-player :as player]
    [tubo.util :as util]))
@@ -124,7 +123,7 @@
                             (rf/dispatch [::events/toggle-stream-layout :show-comments])
                             (rf/dispatch [::events/get-comments url]))}])]
           (if show-comments-loading
-            [loading/loading-icon service-color "text-2xl"]
+            [layout/loading-icon service-color "text-2xl"]
             (when (and show-comments comments-page)
               [comments/comments comments-page uploader-name uploader-avatar url]))])
        (when (and show-related? (not (empty? related-streams)))