⚡ Add lazy loading to dashboard templates

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

@@ -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/use-fn #(move-left))
-         (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)))))
 
         on-move-left-key-down
-        (mf/use-fn
+        (mf/use-fn #(move-left))
-         (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)))))
 
         on-move-right
-        (mf/use-fn
+        (mf/use-fn #(move-right))
-         (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)))))
 
         on-move-right-key-down
-        (mf/use-fn
+        (mf/use-fn #(move-right))
-         (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)))))
 
         on-import-template
         (mf/use-fn
@@ -252,9 +231,8 @@
      [:& title {:collapsed collapsed}]
 
      [:div {:class (stl/css :content)
-            :ref content-ref
+            :on-scroll on-scroll
-            :style {:left card-offset
+            :ref content-ref}
-                    :width (dm/str container-size "px")}}
 
       (for [index (range (count templates))]
         [:& card-item

frontend/src/app/main/ui/dashboard/templates.scss

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

frontend/src/app/util/dom.cljs

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