improve profile screen performance (#18281)

src/quo/components/settings/category/settings/view.cljs

@@ -15,10 +15,12 @@
        :size   :paragraph-2
        :style  (style/label props)}
       label])
-   [rn/flat-list
-    {:data      data
-     :style     (style/settings-items props)
-     :render-fn settings-item/view
-     :separator [rn/view {:style (style/settings-separator props)}]}]])
+   [rn/view {:style (style/settings-items props)}
+    (for [item data]
+      ^{:key item}
+      [:<>
+       [settings-item/view item]
+       (when-not (= item (last data))
+         [rn/view {:style (style/settings-separator props)}])])]])
 
 (def settings-category (quo.theme/with-theme category-internal))

src/status_im/contexts/profile/settings/view.cljs

@@ -16,11 +16,12 @@
 
 (defn- settings-item-view
   [data]
-  [quo/category
-   {:list-type       :settings
-    :container-style {:padding-bottom 0}
-    :blur?           true
-    :data            data}])
+  [rf/delay-render
+   [quo/category
+    {:list-type       :settings
+     :container-style {:padding-bottom 0}
+     :blur?           true
+     :data            data}]])
 
 (defn scroll-handler
   [event scroll-y]
@@ -29,12 +30,13 @@
 
 (defn- footer
   [logout-press]
-  [rn/view {:style style/footer-container}
-   [quo/logout-button {:on-press logout-press}]])
+  [rf/delay-render
+   [rn/view {:style style/footer-container}
+    [quo/logout-button {:on-press logout-press}]]])
 
 (defn- get-item-layout
   [_ index]
-  #js {:length 48 :offset (* 48 index) :index index})
+  #js {:length 100 :offset (* 100 index) :index index})
 
 (defn- settings-view
   [theme]
@@ -60,12 +62,9 @@
       {:key                             :list
        :header                          [settings.header/view {:scroll-y scroll-y}]
        :data                            settings.items/items
-       :key-fn                          :title
-       :get-item-layout                 get-item-layout
-       :initial-num-to-render           6
-       :max-to-render-per-batch         6
        :shows-vertical-scroll-indicator false
        :render-fn                       settings-item-view
+       :get-item-layout                 get-item-layout
        :footer                          [footer logout-press]
        :scroll-event-throttle           16
        :on-scroll                       #(scroll-handler % scroll-y)

src/utils/re_frame.cljs

@@ -3,6 +3,7 @@
   (:require
     [re-frame.core :as re-frame]
     [re-frame.interceptor :as interceptor]
+    [reagent.core :as reagent]
     [taoensso.timbre :as log]
     [utils.datetime :as datetime])
   (:refer-clojure :exclude [merge reduce]))
@@ -76,6 +77,14 @@
     (swap! handler-nesting-level dec)
     res))
 
+(defn delay-render
+  [content]
+  (let [render? (reagent/atom false)]
+    (js/setTimeout #(reset! render? true) 0)
+    (fn []
+      (when @render?
+        content))))
+
 (def sub (comp deref re-frame/subscribe))
 
 (def dispatch re-frame/dispatch)