From 7c1e8a753f028c129b01c7c2eb31e53c8468113f Mon Sep 17 00:00:00 2001
From: AzazelN28 <asakon28@gmail.com>
Date: Tue, 2 Apr 2024 15:47:54 +0200
Subject: [PATCH] :zap: Add lazy loading to dashboard templates

---
 .../src/app/main/ui/dashboard/templates.cljs  | 56 ++++++-------------
 .../src/app/main/ui/dashboard/templates.scss  | 14 ++++-
 frontend/src/app/util/dom.cljs                |  6 ++
 3 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/frontend/src/app/main/ui/dashboard/templates.cljs b/frontend/src/app/main/ui/dashboard/templates.cljs
index 7d2dd5a87..51cb089d3 100644
--- a/frontend/src/app/main/ui/dashboard/templates.cljs
+++ b/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/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
diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss
index 2649d166b..2e13cf6b9 100644
--- a/frontend/src/app/main/ui/dashboard/templates.scss
+++ b/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 {
diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs
index 0a59c586e..efa0fb267 100644
--- a/frontend/src/app/util/dom.cljs
+++ b/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]