Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-10 09:08:31 -05:00
Code Issues Activity

⚡ Thumbnail cache on dashboard

Browse source
This commit is contained in:
alonso.torres 2021-12-27 15:44:46 +01:00
parent 4c86d5cfe3
commit 60af960f42
3 changed files with 49 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/src/app/rpc/queries/files.clj
View file

@ -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,

7
frontend/resources/styles/main/partials/dashboard-grid.scss
View file

@ -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;
}
}
}

46
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -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
:file-id (:id file)
:page-id (get-in file [:data :pages 0])})
(->> (generate-thumbnail)
(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