fix: avoid re-renders inside contact-list for new-chat sheet (#21640)
This change fixes some of the re-rendering issues that occur inside the contact list when creating a new chat. Most important is that we avoid extra re-renders by configuring the flat-list with stable props. And we also avoid re-rendering avatar images each time the avatar component re-renders.
This commit is contained in:
Sean Hagstrom
GitHub
parent
e0e9ab9adb
commit
62c8e73409
|
|
@ -9,6 +9,7 @@
|
|||
gestureHandlerRootHOC
|
||||
FlatList
|
||||
ScrollView)]
|
||||
[react-native.core :as rn]
|
||||
[react-native.flat-list :as rn-flat-list]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
|
|
@ -112,17 +113,21 @@
|
|||
render-fn]
|
||||
:or {sticky-section-headers-enabled true}
|
||||
:as props}]
|
||||
(let [data (flatten-sections sections)]
|
||||
(let [data (flatten-sections sections)
|
||||
render-item (rn/use-callback
|
||||
(fn [p1 p2 p3 p4]
|
||||
[:<>
|
||||
(if (:header? p1)
|
||||
[render-section-header-fn p1 p2 p3 p4]
|
||||
[render-fn p1 p2 p3 p4])
|
||||
(when (and render-section-footer-fn
|
||||
(is-last-item-in-section data p2))
|
||||
[render-section-footer-fn p1 p2 p3 p4])])
|
||||
[render-fn render-section-header-fn render-section-footer-fn])]
|
||||
[flat-list
|
||||
(merge props
|
||||
{:data data
|
||||
:render-fn (fn [p1 p2 p3 p4]
|
||||
[:<>
|
||||
(if (:header? p1)
|
||||
[render-section-header-fn p1 p2 p3 p4]
|
||||
[render-fn p1 p2 p3 p4])
|
||||
(when (and render-section-footer-fn
|
||||
(is-last-item-in-section data p2))
|
||||
[render-section-footer-fn p1 p2 p3 p4])])
|
||||
:sticky-header-indices (when sticky-section-headers-enabled
|
||||
(find-sticky-indices data))})]))
|
||||
{:data data
|
||||
:render-fn render-item
|
||||
:sticky-header-indices
|
||||
(when sticky-section-headers-enabled
|
||||
(find-sticky-indices data))})]))
|
||||
|
|
|
|||
|
|
@ -47,7 +47,8 @@
|
|||
animating? (reagent/atom true)
|
||||
set-animating-true #(reset! animating? true)
|
||||
set-animating-false (fn [ms]
|
||||
(js/setTimeout #(reset! animating? false) ms))]
|
||||
(js/setTimeout #(reset! animating? false) ms))
|
||||
on-scroll-update #(on-scroll % curr-scroll)]
|
||||
(fn [{:keys [content skip-background?]}]
|
||||
(let [theme (quo.theme/use-theme)
|
||||
{:keys [top] :as insets} (safe-area/get-insets)
|
||||
|
|
@ -94,5 +95,5 @@
|
|||
:close close
|
||||
:scroll-enabled? scroll-enabled?
|
||||
:current-scroll curr-scroll
|
||||
:on-scroll #(on-scroll % curr-scroll)
|
||||
:on-scroll on-scroll-update
|
||||
:sheet-animating? animating?}]]]]))))
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
(re-frame/dispatch [:select-contact public-key])))))
|
||||
|
||||
(defn contact-item-render
|
||||
[{:keys [public-key] :as item} set-has-error]
|
||||
[{:keys [public-key] :as item} _ _ {:keys [set-has-error]}]
|
||||
(let [user-selected? (rf/sub [:is-contact-selected? public-key])
|
||||
on-toggle (fn []
|
||||
(-> public-key
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
item]))
|
||||
|
||||
(defn view
|
||||
[{:keys [scroll-enabled? on-scroll close]}]
|
||||
[{:keys [on-scroll close]}]
|
||||
(let [theme (quo.theme/use-theme)
|
||||
contacts (rf/sub [:contacts/sorted-and-grouped-by-first-letter])
|
||||
selected-contacts-count (rf/sub [:selected-contacts-count])
|
||||
|
|
@ -94,9 +94,6 @@
|
|||
customization-color (rf/sub [:profile/customization-color])
|
||||
one-contact-selected? (= selected-contacts-count 1)
|
||||
[has-error? set-has-error] (rn/use-state false)
|
||||
render-fn (rn/use-callback (fn [item]
|
||||
(contact-item-render item set-has-error))
|
||||
[set-has-error])
|
||||
contacts-selected? (pos? selected-contacts-count)
|
||||
{:keys [primary-name public-key]} (when one-contact-selected?
|
||||
(rf/sub [:contacts/contact-by-identity
|
||||
|
|
@ -136,8 +133,8 @@
|
|||
:render-section-header-fn contact-list/contacts-section-header
|
||||
:render-section-footer-fn contact-list/contacts-section-footer
|
||||
:content-container-style {:padding-bottom 70}
|
||||
:render-fn render-fn
|
||||
:scroll-enabled @scroll-enabled?
|
||||
:render-fn contact-item-render
|
||||
:render-data {:set-has-error set-has-error}
|
||||
:on-scroll on-scroll}])
|
||||
(when contacts-selected?
|
||||
[rn/view
|
||||
|
|
|
|||
|
|
@ -7,8 +7,7 @@
|
|||
[react-native.fs :as utils.fs]
|
||||
[react-native.platform :as platform]
|
||||
[schema.core :as schema]
|
||||
[status-im.config :as config]
|
||||
[utils.datetime :as datetime]))
|
||||
[status-im.config :as config]))
|
||||
|
||||
(def ^:const image-server-uri-prefix config/STATUS_BACKEND_SERVER_IMAGE_SERVER_URI_PREFIX)
|
||||
(def ^:const account-images-action "/accountImages")
|
||||
|
|
@ -40,8 +39,6 @@
|
|||
"/"
|
||||
font-file-name))))
|
||||
|
||||
(defn timestamp [] (datetime/timestamp))
|
||||
|
||||
(defn current-theme-index
|
||||
[theme]
|
||||
(case theme
|
||||
|
|
@ -74,7 +71,7 @@
|
|||
`ring?` shows or hides ring for account with ens name"
|
||||
[{:keys [port public-key image-name key-uid size theme indicator-size
|
||||
indicator-border indicator-center-to-edge indicator-color ring?
|
||||
ring-width ratio]}]
|
||||
ring-width ratio clock]}]
|
||||
(str
|
||||
image-server-uri-prefix
|
||||
port
|
||||
|
|
@ -90,7 +87,7 @@
|
|||
"&theme="
|
||||
(current-theme-index theme)
|
||||
"&clock="
|
||||
(timestamp)
|
||||
clock
|
||||
"&indicatorColor="
|
||||
(js/encodeURIComponent indicator-color)
|
||||
"&indicatorSize="
|
||||
|
|
@ -118,7 +115,7 @@
|
|||
[{:keys [port public-key key-uid theme ring? length size customization-color
|
||||
color font-size font-file uppercase-ratio indicator-size
|
||||
indicator-border indicator-center-to-edge indicator-color full-name
|
||||
ring-width ratio]}]
|
||||
ring-width ratio clock]}]
|
||||
(str
|
||||
image-server-uri-prefix
|
||||
port
|
||||
|
|
@ -144,9 +141,9 @@
|
|||
"&theme="
|
||||
(current-theme-index theme)
|
||||
"&clock="
|
||||
clock
|
||||
"&name="
|
||||
(js/encodeURIComponent full-name)
|
||||
(timestamp)
|
||||
"&indicatorColor="
|
||||
(js/encodeURIComponent indicator-color)
|
||||
"&indicatorSize="
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
|
||||
(t/deftest get-account-image-uri-test
|
||||
(with-redefs
|
||||
[sut/current-theme-index identity
|
||||
sut/timestamp (constantly "timestamp")]
|
||||
[sut/current-theme-index identity]
|
||||
(t/is
|
||||
(=
|
||||
(sut/get-account-image-uri {:port "port"
|
||||
|
|
@ -15,6 +14,7 @@
|
|||
:ratio 2
|
||||
:image-name "image-name"
|
||||
:key-uid "key-uid"
|
||||
:clock "timestamp"
|
||||
:theme :dark
|
||||
:indicator-size 2
|
||||
:indicator-color "rgba(9,16,28,0.08)"
|
||||
|
|
@ -26,8 +26,7 @@
|
|||
(t/deftest get-account-initials-uri-test
|
||||
(with-redefs
|
||||
[sut/current-theme-index identity
|
||||
colors/resolve-color str
|
||||
sut/timestamp (constantly "timestamp")]
|
||||
colors/resolve-color str]
|
||||
(t/is
|
||||
(=
|
||||
(sut/get-initials-avatar-uri
|
||||
|
|
@ -35,6 +34,7 @@
|
|||
:public-key "public-key"
|
||||
:ratio 2
|
||||
:key-uid "key-uid"
|
||||
:clock "timestamp"
|
||||
:full-name "full-name"
|
||||
:length "length"
|
||||
:size 48
|
||||
|
|
@ -49,4 +49,4 @@
|
|||
:indicator-center-to-edge 6
|
||||
:indicator-color "#0E1620"
|
||||
:ring-width 4})
|
||||
"https://localhost:port/accountInitials?publicKey=public-key&keyUid=key-uid&length=length&size=96&bgColor=%3Ablue%3Alight&color=%230E162000&fontSize=24&fontFile=%2Ffont%2FInter%20Medium.otf&uppercaseRatio=0.6&theme=:light&clock=&name=full-nametimestamp&indicatorColor=%230E1620&indicatorSize=4&indicatorBorder=0&indicatorCenterToEdge=12&addRing=1&ringWidth=8"))))
|
||||
"https://localhost:port/accountInitials?publicKey=public-key&keyUid=key-uid&length=length&size=96&bgColor=%3Ablue%3Alight&color=%230E162000&fontSize=24&fontFile=%2Ffont%2FInter%20Medium.otf&uppercaseRatio=0.6&theme=:light&clock=timestamp&name=full-name&indicatorColor=%230E1620&indicatorSize=4&indicatorBorder=0&indicatorCenterToEdge=12&addRing=1&ringWidth=8"))))
|
||||
|
|
|
|||
Loading…
Reference in New Issue