a little ux

src/cljs/auto_ap/db.cljs

@@ -4,4 +4,5 @@
   {:company {:name "Campbell brewery"}
    :invoices {:pending #{}
               :unpaid #{}}
+   :status {:loading false}
    })

src/cljs/auto_ap/events.cljs

@@ -32,7 +32,8 @@
 (re-frame/reg-event-fx
  ::view-unpaid-invoices
  (fn [cofx []]
-   {:http {:method :get
+   {:db (assoc-in (:db cofx) [:status :loading] true)
+    :http {:method :get
            :uri "/api/invoices/unpaid"
            :on-success [::received-invoices :unpaid]}}))
 
@@ -47,4 +48,7 @@
 (re-frame/reg-event-db
  ::received-invoices
  (fn  [db [_ type new-invoices]]
-   (assoc-in db [:invoices type] new-invoices)))
+   (-> db
+       (assoc-in [:invoices type] new-invoices)
+       (assoc-in [:status :loading] false)
+       )))

src/cljs/auto_ap/subs.cljs

@@ -20,3 +20,8 @@
  ::unpaid-invoices
  (fn [db]
    (:unpaid (:invoices db))))
+
+(re-frame/reg-sub
+ ::status
+ (fn [db]
+   (:status db)))

src/cljs/auto_ap/views.cljs

@@ -32,8 +32,7 @@
                                                     :paramName "file"
                                                     :url "/pdf-upload"
                                                     :previewsContainer "#dz-hidden"
-                                                    :previewTemplate "<div class='dz-hidden-preview'></div>"
+                                                    :previewTemplate "<div class='dz-hidden-preview'></div>"})))}))
-                                                    })))}))
 
 (defmulti active-page identity)
 
@@ -49,25 +48,29 @@
 (defmethod active-page :unpaid-invoices []
   [(with-meta
      (fn []
-       (let [invoices (re-frame/subscribe [::subs/unpaid-invoices])]
+       (let [invoices (re-frame/subscribe [::subs/unpaid-invoices])
-         
+             status (re-frame/subscribe [::subs/status])]
          [:div {:class "inbox-messages"}
           [:h1.title "Unpaid invoices"]
-          [:table {:class "table", :style {:width "100%"}}
+          (if (:loading @status)
-           [:thead  
+            [:div {:class "inbox-messages"}
-            [:tr  
+             [:h1.title
-             [:th "Customer"]
+              [:i.fa.fa-spin.fa-spinner]]]
-             [:th "Invoice #"]
+            [:table {:class "table", :style {:width "100%"}}
-             [:th "Date"]
+             [:thead  
-             [:th "Amount"]]]
+              [:tr  
-           [:tbody (for [{:keys [customer-identifier invoice-number date total id] :as i} @invoices]
+               [:th "Customer"]
-                     ^{:key (str customer-identifier "-" invoice-number "-" date "-" total "-" id)}
+               [:th "Invoice #"]
-                     [:tr
+               [:th "Date"]
-                      [:td customer-identifier]
+               [:th "Amount"]]]
-                      [:td invoice-number]
+             [:tbody (for [{:keys [customer-identifier invoice-number date total id] :as i} @invoices]
-                      [:td date]
+                       ^{:key (str customer-identifier "-" invoice-number "-" date "-" total "-" id)}
-                      [:td total]])]]]))
+                       [:tr
-     {:component-did-mount #(re-frame/dispatch [::events/view-unpaid-invoices]) })])
+                        [:td customer-identifier]
+                        [:td invoice-number]
+                        [:td date]
+                        [:td total]])]])]))
+     {:component-will-mount #(re-frame/dispatch-sync [::events/view-unpaid-invoices]) })])
 
 (defmethod active-page :paid-invoices []
   [:div {:class "inbox-messages"}
@@ -121,7 +124,7 @@
                            (re-frame/dispatch [::events/reject-invoices]))}
               "Reject all"]
              ]]]))
-      {:component-did-mount (fn []
+      {:component-will-mount (fn []
                               (go
                                 (->> (<! (http/get "/api/invoices/pending"))
                                      :body