Virtual pagination for accounts page

src/cljs/auto_ap/views/components/admin/side_bar.cljs

@@ -11,7 +11,7 @@
             [auto-ap.subs :as subs]
             [auto-ap.events :as events]))
 
-(defn admin-side-bar [params & rest]
+(defn admin-side-bar [params ]
   (let [ap @(re-frame/subscribe [::subs/active-page])]
     [:div
       [:p.menu-label "General"]
@@ -73,4 +73,4 @@
           [:i {:class "fa fa-download"}]]
          
          [:span {:class "name"} "Excel Invoices"]]]]
-     [:div rest]]))
+     (into [:div ] (r/children (r/current-component)))]))

src/cljs/auto_ap/views/components/grid.cljs

@@ -141,13 +141,8 @@
 
 (defn cell [params]
   [:td params
-   [appearing {:visible? true
-               :timeout 1000
-               :enter-class "appear"
-               :exit-class "disappear"}
-
-    (into [:span.test ]
-          (r/children (r/current-component)))]])
+   (into [:span.test ]
+         (r/children (r/current-component)))])
 
 (defn body []
   (let [children (r/children (r/current-component))]
@@ -207,3 +202,11 @@
                      (into 
                       [:<> ]
                       (r/children (r/current-component))))))
+
+(defn virtual-paginate [start xs ]
+  (take 100 (drop start xs)))
+
+(defn virtual-paginate-controls [start xs]
+  {:start start :end (min (+ start 100)
+                          (count xs))
+   :total (count xs)})

src/cljs/auto_ap/views/components/layouts.cljs

@@ -14,7 +14,8 @@
    [auto-ap.views.components.modal :as modal]
    [auto-ap.entities.vendors :as vendor]
    [auto-ap.views.components.vendor-dialog :as vendor-dialog]
-   [clojure.string :as str]))
+   [clojure.string :as str]
+   [reagent.core :as r]))
 
 
 (defn navbar-drop-down-contents [{:keys [id]} children ]
@@ -168,10 +169,11 @@
     [:p  
      [:strong "Integreat"] ]]])
 
-(defn appearing-side-bar [{:keys [visible?]} & children ]
+(defn appearing-side-bar [{:keys [visible?]} ]
   [appearing {:visible? visible? :enter-class "slide-in-right" :exit-class "slide-out-right" :timeout 500}
    [:aside  {:class "column is-4 aside menu" :style {:height "calc(100vh - 46px)" :overflow "auto"}}
-    (into [:div.sub-main {} ] children )]])
+    (into [:div.sub-main {} ]
+          (r/children (r/current-component)))]])
 
 (defn side-bar-layout [{:keys [side-bar main ap bottom right-side-bar]}]
   (let [ap @(re-frame/subscribe [::subs/active-page])