✨ Improve loading state on dashboard.

frontend/resources/locales.json

@@ -351,6 +351,13 @@
       "es" : "Todavía no hay ningún archivo aquí"
     }
   },
+  "dashboard.loading-files" : {
+    "used-in" : [ "src/app/main/ui/dashboard/grid.cljs:189" ],
+    "translations" : {
+      "en" : "loading your files ...",
+      "es" : "cargando tus ficheros ..."
+    }
+  },
   "dashboard.invite-profile" : {
     "used-in" : [ "src/app/main/ui/dashboard/team.cljs:72" ],
     "translations" : {

frontend/src/app/main/data/dashboard.cljs

@@ -117,25 +117,9 @@
     ptk/WatchEvent
     (watch [_ state stream]
       (let [profile (:profile state)]
-        (->> (rx/merge (ptk/watch (fetch-team params) state stream)
-                       (ptk/watch (fetch-projects {:team-id id}) state stream)
-                       (ptk/watch (du/fetch-users {:team-id id}) state stream))
-             (rx/catch (fn [{:keys [type code] :as error}]
-                         (cond
-                           (and (= :not-found type)
-                                (not= id (:default-team-id profile)))
-                           (rx/of (rt/nav :dashboard-projects {:team-id (:default-team-id profile)})
-                                  (dm/error "Team does not found"))
-
-                           (and (= :validation type)
-                                (= :not-authorized code)
-                                (not= id (:default-team-id profile)))
-                           (rx/of (rt/nav :dashboard-projects {:team-id (:default-team-id profile)})
-                                  (dm/error "Team does not found"))
-
-                           :else
-                           (rx/throw error)))))))))
-
+        (rx/merge (ptk/watch (fetch-team params) state stream)
+                  (ptk/watch (fetch-projects {:team-id id}) state stream)
+                  (ptk/watch (du/fetch-users {:team-id id}) state stream))))))
 
 ;; --- Search Files
 
@@ -197,23 +181,29 @@
   [{:keys [team-id] :as params}]
   (us/assert ::us/uuid team-id)
   (ptk/reify ::fetch-recent-files
+    ptk/UpdateEvent
+    (update [_ state]
+      (dissoc state :files :recent-files))
+
     ptk/WatchEvent
     (watch [_ state stream]
       (let [params {:team-id team-id}]
         (->> (rp/query :recent-files params)
-             (rx/map recent-files-fetched))))))
+             (rx/map #(recent-files-fetched team-id %)))))))
 
 (defn recent-files-fetched
-  [files]
+  [team-id files]
   (ptk/reify ::recent-files-fetched
     ptk/UpdateEvent
     (update [_ state]
-      (reduce-kv (fn [state project-id files]
-                   (-> state
-                       (update-in [:files project-id] merge (d/index-by :id files))
-                       (assoc-in [:recent-files project-id] (into #{} (map :id) files))))
-                 state
-                 (group-by :project-id files)))))
+      (let [projects (keys (get-in state [:projects team-id]))]
+        (reduce (fn [state project-id]
+                  (let [files (filter #(= project-id (:project-id %)) files)]
+                    (-> state
+                        (update-in [:files project-id] merge (d/index-by :id files))
+                        (assoc-in [:recent-files project-id] (into #{} (map :id) files)))))
+                state
+                projects)))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Data Modification

frontend/src/app/main/ui/dashboard.cljs

@@ -112,7 +112,7 @@
                   :profile profile
                   :section section
                   :search-term search-term}]
-     (when team
+     (when (and team (seq projects))
        [:& dashboard-content {:projects projects
                               :profile profile
                               :project project

frontend/src/app/main/ui/dashboard/grid.cljs

@@ -183,16 +183,25 @@
 
 (mf/defc empty-placeholder
   []
-  (let [locale (mf/deref i18n/locale)]
-    [:div.grid-empty-placeholder
-     [:div.icon i/file-html]
-     [:div.text (t locale "dashboard.empty-files")]]))
+  [:div.grid-empty-placeholder
+   [:div.icon i/file-html]
+   [:div.text (tr "dashboard.empty-files")]])
+
+(mf/defc loading-placeholder
+  []
+  [:div.grid-empty-placeholder
+   [:div.icon i/loader]
+   [:div.text (tr "dashboard.loading-files")]])
 
 (mf/defc grid
   [{:keys [id opts files] :as props}]
   (let [locale (mf/deref i18n/locale)]
     [:section.dashboard-grid
-     (if (pos? (count files))
+     (cond
+       (nil? files)
+       [:& loading-placeholder]
+
+       (seq files)
        [:div.grid-row
         (for [item files]
           [:& grid-item
@@ -200,6 +209,7 @@
             :file item
             :key (:id item)}])]
 
+       :else
        [:& empty-placeholder])]))
 
 (mf/defc line-grid-row
@@ -255,9 +265,15 @@
   [{:keys [project-id opts files on-load-more] :as props}]
   (let [locale (mf/deref i18n/locale)]
     [:section.dashboard-grid
-     (if (pos? (count files))
+     (cond
+       (nil? files)
+       [:& loading-placeholder]
+
+       (seq files)
        [:& line-grid-row {:files files
                           :on-load-more on-load-more
                           :locale locale}]
+
+       :else
        [:& empty-placeholder])]))
 

frontend/src/app/main/ui/dashboard/projects.cljs

@@ -50,10 +50,10 @@
         files-map  (mf/deref files-ref)
         recent-ids (mf/deref recent-ref)
 
-        files      (->> recent-ids
-                        (map #(get files-map %))
-                        (sort-by :modified-at)
-                        (reverse))
+        files      (some->> recent-ids
+                            (map #(get files-map %))
+                            (sort-by :modified-at)
+                            (reverse))
 
         project-id (:id project)
         team-id    (:team-id project)