enhance(ux): support virtualized grid for the gallery view

src/main/frontend/components/block/views.css

@@ -1,7 +1,17 @@
 .ls-cards {
-  @apply grid grid-cols-[repeat(auto-fill,18rem)] gap-4 content;
-
   .ls-card-item {
-    @apply dark:shadow-gray-700 shadow-md rounded-md p-2 overflow-y-scroll h-[15rem];
+    @apply dark:shadow-gray-700 shadow-md rounded-md p-4 h-[15rem] w-full overflow-auto;
+  }
+
+  > div[data-virtuoso-scroller] {
+    @apply w-full;
+  }
+
+  .virtuoso-grid-list {
+    @apply flex flex-wrap gap-3;
+  }
+
+  .virtuoso-grid-item {
+    @apply flex w-[290px];
   }
 }

src/main/frontend/components/views.cljs

@@ -1069,15 +1069,25 @@
                        :group-by-page? group-by-page?
                        :ref? true)))))
 
+(rum/defc gallery-card-item
+  [view-entity block config]
+  [:div.ls-card-item
+   {:key (str "view-card-" (:db/id view-entity) "-" (:db/id block))}
+   [:div.-ml-4
+    (block-container (assoc config :id (str (:block/uuid block))) block)]])
+
 (rum/defcs gallery-view < rum/static mixins/container-id
-  [state config view-entity result]
+  [state config view-entity blocks]
   (let [config' (assoc config :container-id (:container-id state))]
     [:div.ls-cards
-     (for [block result]
-       [:div.ls-card-item
-        {:key (str "view-card-" (:db/id view-entity) "-" (:db/id block))}
-        [:div.-ml-4
-         (block-container (assoc config' :id (str (:block/uuid block))) block)]])]))
+     (when (seq blocks)
+       (ui/virtualized-grid
+         {:total-count (count blocks)
+          :custom-scroll-parent (gdom/getElement "main-content-container")
+          :item-content (fn [idx]
+                          (when-let [block (nth blocks idx)]
+                            (gallery-card-item view-entity block config')))})
+       )]))
 
 (defn- run-effects!
   [{:keys [data columns state data-fns]} input input-filters set-input-filters!]

src/main/frontend/ui.cljs

@@ -6,7 +6,7 @@
             ["react-textarea-autosize" :as TextareaAutosize]
             ["react-tippy" :as react-tippy]
             ["react-transition-group" :refer [CSSTransition TransitionGroup]]
-            ["react-virtuoso" :refer [Virtuoso]]
+            ["react-virtuoso" :refer [Virtuoso VirtuosoGrid]]
             ["@emoji-mart/data" :as emoji-data]
             ["emoji-mart" :as emoji-mart]
             [cljs-bean.core :as bean]
@@ -45,6 +45,7 @@
 (defonce css-transition (r/adapt-class CSSTransition))
 (defonce textarea (r/adapt-class (gobj/get TextareaAutosize "default")))
 (defonce virtualized-list (r/adapt-class Virtuoso))
+(defonce virtualized-grid (r/adapt-class VirtuosoGrid))
 
 (def resize-provider (r/adapt-class (gobj/get Resize "ResizeProvider")))
 (def resize-consumer (r/adapt-class (gobj/get Resize "ResizeConsumer")))