🐛 Fix thumbnails handling on dashboard libraries

CHANGES.md

@@ -5,19 +5,24 @@
 ### :boom: Breaking changes & Deprecations
 
 ### :sparkles: New features
+
 - Default naming of text layers [Taiga #2836](https://tree.taiga.io/project/penpot/us/2836)
 - Create typography style from a selected text layer[Taiga #3041](https://tree.taiga.io/project/penpot/us/3041)
 - Board as ruler origin [Taiga #4833](https://tree.taiga.io/project/penpot/us/4833)
 - Access tokens support [Taiga #4460](https://tree.taiga.io/project/penpot/us/4460)
 - Show interactions setting at the view mode [Taiga #1330](https://tree.taiga.io/project/penpot/issue/1330)
+- Improve dashboard performance related to thumbnails; now the thumbnails are
+  rendered as bitmap images.
 
 ### :bug: Bugs fixed
+
 - Fix files can be opened from multiple urls [Taiga #5310](https://tree.taiga.io/project/penpot/issue/5310)
 - Fix asset color item was created from the selected layer [Taiga #5180](https://tree.taiga.io/project/penpot/issue/5180)
 
 ### :arrow_up: Deps updates
 
 ### :heart: Community contributions by (Thank you!)
+
 - Update Typography palette order (by @akshay-gupta7) [Github #3156](https://github.com/penpot/penpot/pull/3156)
 - Palettes (color, typographies) empty state (by @akshay-gupta7) [Github #3160](https://github.com/penpot/penpot/pull/3160)
 - Duplicate objects via drag + alt (by @akshay-gupta7) [Github #3147](https://github.com/penpot/penpot/pull/3147)

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

@@ -549,9 +549,11 @@
           f.created_at,
           f.modified_at,
           f.name,
-          f.is_shared
+          f.is_shared,
+          ft.media_id
      from file as f
     inner join project as p on (p.id = f.project_id)
+     left join file_thumbnail as ft on (ft.file_id = f.id and ft.revn = f.revn)
     where f.is_shared = true
       and f.deleted_at is null
       and p.deleted_at is null
@@ -582,6 +584,12 @@
     (->> (db/exec! conn [sql:team-shared-files team-id])
          (into #{} (comp
                     (map decode-row)
+                    (map (fn [row]
+                           (if-let [media-id (:media-id row)]
+                             (-> row
+                                 (dissoc :media-id)
+                                 (assoc :thumbnail-uri (resolve-public-uri media-id)))
+                             (dissoc row :media-id))))
                     (map #(assoc % :library-summary (library-summary %)))
                     (map #(dissoc % :data)))))))
 

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

@@ -23,38 +23,39 @@
   [{:keys [team] :as props}]
   (let [files-map       (mf/deref refs/dashboard-shared-files)
         projects        (mf/deref refs/dashboard-projects)
+
         default-project (->> projects vals (d/seek :is-default))
-        files           (if (nil? files-map)
-                          nil
-                          (->> (vals files-map)
-                             (sort-by :modified-at)
-                             (reverse)))
+
+        files           (mf/with-memo [files-map]
+                          (if (nil? files-map)
+                            nil
+                            (->> (vals files-map)
+                                 (sort-by :modified-at)
+                                 (reverse))))
 
         components-v2   (features/use-feature :components-v2)
 
         width           (mf/use-state nil)
         rowref          (mf/use-ref)
-        itemsize        (if (>= @width 1030)
-                          280
-                          230)
+
+        itemsize        (if (>= @width 1030) 280 230)
         ratio           (if (some? @width) (/ @width itemsize) 0)
         nitems          (mth/floor ratio)
         limit           (min 10 nitems)
         limit           (max 1 limit)]
-    (mf/use-effect
-     (mf/deps team)
-     (fn []
-       (when team
-         (let [tname (if (:is-default team)
-                       (tr "dashboard.your-penpot")
-                       (:name team))]
-           (dom/set-html-title (tr "title.dashboard.shared-libraries" tname))))))
 
-    (mf/use-effect
-     #(st/emit! (dd/fetch-shared-files)
+    (mf/with-effect [team]
+      (when team
+        (let [tname (if (:is-default team)
+                      (tr "dashboard.your-penpot")
+                      (:name team))]
+          (dom/set-html-title (tr "title.dashboard.shared-libraries" tname)))))
+
+    (mf/with-effect []
+      (st/emit! (dd/fetch-shared-files)
                 (dd/clear-selected-files)))
 
-    (mf/with-effect
+    (mf/with-effect []
       (let [node (mf/ref-val rowref)
             mnt? (volatile! true)
             sub  (->> (wapi/observe-resize node)
@@ -73,7 +74,7 @@
      [:header.dashboard-header {:ref rowref}
       [:div.dashboard-title#dashboard-libraries-title
        [:h1 (tr "dashboard.libraries-title")]]]
-     [:section.dashboard-container.no-bg.dashboard-shared 
+     [:section.dashboard-container.no-bg.dashboard-shared
       [:& grid {:files files
                 :project default-project
                 :origin :libraries