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

⚡ Add lazy loading to dashboard templates

Browse source
This commit is contained in:
AzazelN28 2024-04-02 15:47:54 +02:00 committed by Alonso Torres
parent 04fe8f8960
commit 7c1e8a753f
3 changed files with 36 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
frontend/src/app/main/ui/dashboard/templates.cljs
View file

@ -123,7 +123,9 @@
[:div {:class (stl/css :template-card)}
[:div {:class (stl/css :img-container)}
[:img {:src (dm/str thb)
:alt (:name item)}]]
:alt (:name item)
:loading "lazy"
:decoding "async"}]]
[:div {:class (stl/css :card-name)}
[:span {:class (stl/css :card-text)} (:name item)]
download-icon]]]))
@ -194,48 +196,25 @@
last-card (+ (- card-count 1) left-moves)
content-ref (mf/use-ref)
move-left (fn [] (dom/scroll-by! (mf/ref-val content-ref) -300 0))
move-right (fn [] (dom/scroll-by! (mf/ref-val content-ref) 300 0))
;; TODO: Hacer que esta función detecte si etamos al final o al
;; principio para hacer aparecer o desaparecer los botones del
;; dashboard de templates
on-scroll (mf/use-fn #(js/console.log "scroll" %))
on-move-left
(mf/use-fn
(mf/deps card-offset card-width)
(fn [_event]
(when-not (zero? card-offset)
(dom/animate! (mf/ref-val content-ref)
[#js {:left (dm/str card-offset "px")}
#js {:left (dm/str (+ card-offset card-width) "px")}]
#js {:duration 200 :easing "linear"})
(reset! card-offset* (+ card-offset card-width)))))
(mf/use-fn #(move-left))
on-move-left-key-down
(mf/use-fn
(mf/deps on-move-left first-card)
(fn [event]
(when (kbd/enter? event)
(dom/stop-propagation event)
(on-move-left event)
(when-let [node (dom/get-element (dm/str "card-container-" first-card))]
(dom/focus! node)))))
(mf/use-fn #(move-left))
on-move-right
(mf/use-fn
(mf/deps more-cards card-offset card-width)
(fn [_event]
(when more-cards
(swap! card-offset* inc)
(dom/animate! (mf/ref-val content-ref)
[#js {:left (dm/str card-offset "px")}
#js {:left (dm/str (- card-offset card-width) "px")}]
#js {:duration 200 :easing "linear"})
(reset! card-offset* (- card-offset card-width)))))
(mf/use-fn #(move-right))
on-move-right-key-down
(mf/use-fn
(mf/deps on-move-right last-card)
(fn [event]
(when (kbd/enter? event)
(dom/stop-propagation event)
(on-move-right event)
(when-let [node (dom/get-element (dm/str "card-container-" last-card))]
(dom/focus! node)))))
(mf/use-fn #(move-right))
on-import-template
(mf/use-fn
@ -252,9 +231,8 @@
[:& title {:collapsed collapsed}]
[:div {:class (stl/css :content)
:ref content-ref
:style {:left card-offset
:width (dm/str container-size "px")}}
:on-scroll on-scroll
:ref content-ref}
(for [index (range (count templates))]
[:& card-item

14
frontend/src/app/main/ui/dashboard/templates.scss
View file

@ -109,24 +109,36 @@
}
.content {
display: grid;
grid-template-columns: repeat(auto-fill, minmax($s-276, $s-276));
grid-auto-flow: column;
pointer-events: all;
/*
width: 200%;
height: $s-228;
margin-left: $s-6;
position: absolute;
border-top-left-radius: $s-8;
background-color: $db-quaternary;
*/
overflow: scroll hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scroll-snap-stop: always;
}
.card-container {
width: $s-276;
margin-top: $s-20;
display: inline-block;
text-align: center;
vertical-align: top;
background-color: transparent;
border: none;
padding: 0;
scroll-snap-align: center;
}
.template-card {

6
frontend/src/app/util/dom.cljs
View file

@ -756,6 +756,12 @@
[]
(.reload (.-location js/window)))
(defn scroll-by!
([element x y]
(.scrollBy ^js element x y))
([x y]
(scroll-by! js/window x y)))
(defn animate!
([item keyframes duration] (animate! item keyframes duration nil))
([item keyframes duration onfinish]