⚡ Thumbnail cache on dashboard

backend/src/app/rpc/queries/files.clj

@@ -260,6 +260,7 @@
 
 (def ^:private sql:team-shared-files
   "select f.id,
+          f.revn,
           f.project_id,
           f.created_at,
           f.modified_at,
@@ -330,6 +331,7 @@
 (def sql:team-recent-files
   "with recent_files as (
      select f.id,
+            f.revn,
             f.project_id,
             f.created_at,
             f.modified_at,

frontend/resources/styles/main/partials/dashboard-grid.scss

@@ -311,6 +311,9 @@
     width: 100%;
 
     background-color: $color-canvas;
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
 
     .img-th {
       height: auto;
@@ -321,6 +324,10 @@
       height: 100%;
       width: 100%;
     }
+
+    svg#loader-pencil {
+      fill: $color-gray-20;
+    }
   }
 }
 

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

@@ -22,6 +22,7 @@
    [app.util.dom.dnd :as dnd]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
+   [app.util.storage :as stg]
    [app.util.time :as dt]
    [app.util.timers :as ts]
    [app.util.webapi :as wapi]
@@ -30,22 +31,55 @@
 
 ;; --- Grid Item Thumbnail
 
+(defn use-thumbnail-cache
+  "Creates some hooks to handle the files thumbnails cache"
+  [file]
+
+  (let [get-thumbnail
+        (mf/use-callback
+         (mf/deps file)
+         (fn []
+           (let [[revn thumb-data] (get-in @stg/storage [:thumbnails (:id file)])]
+             (when (= revn (:revn file))
+               thumb-data))))
+
+        cache-thumbnail
+        (mf/use-callback
+         (mf/deps file)
+         (fn [thumb-data]
+           (swap! stg/storage #(assoc-in % [:thumbnails (:id file)] [(:revn file) thumb-data]))))
+
+        generate-thumbnail
+        (mf/use-callback
+         (mf/deps file)
+         (fn []
+           (let [thumb-data (get-thumbnail)]
+             (if (some? thumb-data)
+               (rx/of thumb-data)
+               (->> (wrk/ask! {:cmd :thumbnails/generate
+                               :file-id (:id file)
+                               :page-id (get-in file [:data :pages 0])})
+                    (rx/tap cache-thumbnail))))))]
+
+    generate-thumbnail))
+
 (mf/defc grid-item-thumbnail
   {::mf/wrap [mf/memo]}
   [{:keys [file] :as props}]
-  (let [container (mf/use-ref)]
+  (let [container (mf/use-ref)
+        generate-thumbnail (use-thumbnail-cache file)]
+
     (mf/use-effect
-     (mf/deps (:id file))
+     (mf/deps file)
      (fn []
-       (->> (wrk/ask! {:cmd :thumbnails/generate
+       (->> (generate-thumbnail)
-                       :file-id (:id file)
-                       :page-id (get-in file [:data :pages 0])})
             (rx/subs (fn [{:keys [svg fonts]}]
                        (run! fonts/ensure-loaded! fonts)
                        (when-let [node (mf/ref-val container)]
                          (set! (.-innerHTML ^js node) svg)))))))
     [:div.grid-item-th {:style {:background-color (get-in file [:data :options :background])}
-                        :ref container}]))
+                        :ref container}
+     i/loader-pencil]))
 
 ;; --- Grid Item