improve(ui): loading indicator for syncing assets

src/main/frontend/components/block.cljs

@@ -65,6 +65,8 @@
             [promesa.core :as p]
             [reitit.frontend.easy :as rfe]
             [rum.core :as rum]
+            [frontend.fs :as fs]
+            [frontend.handler.file-sync :as file-sync]
             [shadow.loader :as loader]))
 
 (defn safe-read-string
@@ -173,6 +175,60 @@
                 parts (remove #(string/blank? %) parts)]
             (string/join "/" (reverse parts))))))))
 
+(rum/defcs asset-loader
+  < rum/reactive
+    (rum/local nil ::exist?)
+    (rum/local false ::loading?)
+    {:will-mount  (fn [state]
+                    (let [src (first (:rum/args state))]
+                      (if (and (gp-config/local-asset? src)
+                               (file-sync/current-graph-sync-on?))
+                        (let [*exist? (::exist? state)
+                              asset-path (string/replace src (str gp-config/local-assets-dir "://") "")]
+                          (if (string/blank? asset-path)
+                            (reset! *exist? false)
+                            (-> (fs/file-exists? "" asset-path)
+                                (p/then
+                                  (fn [exist?]
+                                    (reset! *exist? (boolean exist?))))))
+                          (assoc state ::asset-path asset-path ::asset-file? true))
+                        state)))
+     :will-update (fn [state]
+                    (let [src (first (:rum/args state))
+                          asset-file? (boolean (::asset-file? state))
+                          sync-on? (file-sync/current-graph-sync-on?)
+                          *loading? (::loading? state)
+                          *exist? (::exist? state)]
+                      (when (and sync-on? asset-file? (false? @*exist?))
+                        (let [sync-state (state/sub [:file-sync/sync-state (state/get-current-repo)])
+                              _downloading-files (:current-remote->local-files sync-state)
+                              contain-url? (and (seq _downloading-files)
+                                                (some #(string/ends-with? src %) _downloading-files))]
+                          (cond
+                            (and (not @*loading?) contain-url?)
+                            (reset! *loading? true)
+
+                            (and @*loading? (not contain-url?))
+                            (do
+                              (reset! *exist? true)
+                              (reset! *loading? false))))))
+                    state)}
+  [state _src content-fn]
+  (let [_ (state/sub [:file-sync/sync-state (state/get-current-repo)])
+        exist? @(::exist? state)
+        loading? @(::loading? state)
+        asset-file? (::asset-file? state)
+        sync-enabled? (boolean (file-sync/current-graph-sync-on?))]
+
+    (if (not sync-enabled?)
+      (content-fn)
+      (if (and asset-file? (or loading? (nil? exist?)))
+        [:p.text-sm.opacity-50 (ui/loading "Loading image ...")]
+        (if (or (not asset-file?)
+                (and exist? (not loading?)))
+          (content-fn)
+          [:p.text-red-500.text-xs [:small.opacity-80 "Image not found!"]])))))
+
 (defonce *resizing-image? (atom false))
 (rum/defcs resizable-image <
   (rum/local nil ::size)
@@ -281,7 +337,8 @@
           (audio-cp @src)
 
           (contains? (config/img-formats) ext)
-          (resizable-image config title @src metadata full_text true)
+          (asset-loader @src
+            #(resizable-image config title @src metadata full_text true))
 
           (= ext :pdf)
           [:a.asset-ref.is-pdf {:href @src

src/main/frontend/handler/file_sync.cljs

@@ -22,6 +22,10 @@
   (let [[_user-uuid graph-uuid _txid] @sync/graphs-txid]
     (some? graph-uuid)))
 
+(defn current-graph-sync-on?
+  []
+  (when-let [sync-state (state/sub [:file-sync/sync-state (state/get-current-repo)])]
+    (not (sync/sync-state--stopped? sync-state))))
 
 (defn create-graph
   [name]