Reduce renderings in community overview

c15f9e73...1ea2bd99

This PR reduces the amount of rendering in community overview.
It limits the amount of data is passed to components to the necessary,
and it creates functions on component initialization so that they won't
cause a re-render.
Performance of the header are very noticeably better on my local
environment, though on nightly builds is less noticeable.

It also removes data from `communities/communities id` as that cause a
re-render of any component subscribed to it.
This commit is contained in:
Andrea Maria Piana 2024-02-13 08:43:20 +00:00
parent 37be08d2d7
commit 4e3ce54ac4
No known key found for this signature in database
6 changed files with 100 additions and 85 deletions

View File

@ -10,16 +10,16 @@
{:db (-> db {:db (-> db
(assoc-in [:community-channels-permissions community-id] (assoc-in [:community-channels-permissions community-id]
(data-store/rpc->channel-permissions (:channels response))) (data-store/rpc->channel-permissions (:channels response)))
(assoc-in [:communities community-id :checking-all-channels-permissions?] false))})) (assoc-in [:communities/channel-permissions-check community-id] false))}))
(rf/reg-event-fx :communities/check-all-community-channels-permissions-failed (rf/reg-event-fx :communities/check-all-community-channels-permissions-failed
(fn [{:keys [db]} [community-id]] (fn [{:keys [db]} [community-id]]
{:db (assoc-in db [:communities community-id :checking-all-channels-permissions?] false)})) {:db (assoc-in db [:communities/channel-permissions-check community-id] false)}))
(rf/reg-event-fx :communities/check-all-community-channels-permissions (rf/reg-event-fx :communities/check-all-community-channels-permissions
(fn [{:keys [db]} [community-id]] (fn [{:keys [db]} [community-id]]
(when (get-in db [:communities community-id]) (when (get-in db [:communities community-id])
{:db (assoc-in db [:communities community-id :checking-all-channels-permissions?] true) {:db (assoc-in db [:communities/channel-permissions-check community-id] true)
:fx [[:json-rpc/call :fx [[:json-rpc/call
[{:method "wakuext_checkAllCommunityChannelsPermissions" [{:method "wakuext_checkAllCommunityChannelsPermissions"
:params [{:CommunityID community-id}] :params [{:CommunityID community-id}]
@ -38,21 +38,19 @@
(let [token-permissions-check (cond-> result (let [token-permissions-check (cond-> result
based-on-client-selection? (assoc :based-on-client-selection? true))] based-on-client-selection? (assoc :based-on-client-selection? true))]
{:db (-> db {:db (-> db
(assoc-in [:communities community-id :checking-permissions?] false) (assoc-in [:communities/permissions-check community-id]
(assoc-in [:communities community-id :token-permissions-check] {:checking? false
token-permissions-check))}))) :check token-permissions-check}))})))
(rf/reg-event-fx :communities/check-permissions-to-join-community-failed (rf/reg-event-fx :communities/check-permissions-to-join-community-failed
(fn [{:keys [db]} [community-id]] (fn [{:keys [db]} [community-id]]
{:db (assoc-in db [:communities community-id :checking-permissions?] false)})) {:db (assoc-in db [:communities/permissions-check community-id :checking?] false)}))
(rf/reg-event-fx :communities/check-permissions-to-join-community (rf/reg-event-fx :communities/check-permissions-to-join-community
(fn [{:keys [db]} [community-id addresses based-on-client-selection?]] (fn [{:keys [db]} [community-id addresses based-on-client-selection?]]
(when-let [community (get-in db [:communities community-id])] (when-let [community (get-in db [:communities community-id])]
(when-not (:checking-permissions? community) (when-not (:checking-permissions? community)
{:db (-> db {:db (assoc-in db [:communities/permissions-check community-id :checking?] true)
(assoc-in [:communities community-id :checking-permissions?] true)
(assoc-in [:communities community-id :can-request-access?] false))
:json-rpc/call [{:method "wakuext_checkPermissionsToJoinCommunity" :json-rpc/call [{:method "wakuext_checkPermissionsToJoinCommunity"
:params [(cond-> {:communityId community-id} :params [(cond-> {:communityId community-id}
addresses addresses

View File

@ -112,7 +112,7 @@
(defn- network-not-supported (defn- network-not-supported
[] []
[quo/text (i18n/label :network-not-supported)]) [quo/text (i18n/label :t/network-not-supported)])
(defn- request-access-button (defn- request-access-button
[id color] [id color]
@ -253,15 +253,17 @@
:description-accessibility-label :community-description}]) :description-accessibility-label :community-description}])
(defn- community-content (defn- community-content
[{:keys [id]}] [id]
(rf/dispatch [:communities/check-all-community-channels-permissions id]) (rf/dispatch [:communities/check-all-community-channels-permissions id])
(fn [{:keys [name description joined spectated images tags color id membership-permissions?] (fn [id
:as community}
{:keys [on-category-layout {:keys [on-category-layout
collapsed? collapsed?
on-first-channel-height-changed]}] on-first-channel-height-changed]}]
(let [joined-or-spectated (or joined spectated) (let [{:keys [name description joined spectated images tags color id membership-permissions?]
chats-by-category (rf/sub [:communities/categorized-channels id])] :as community}
(rf/sub [:communities/community id])
joined-or-spectated (or joined spectated)
chats-by-category (rf/sub [:communities/categorized-channels id])]
[:<> [:<>
[rn/view {:style style/community-content-container} [rn/view {:style style/community-content-container}
(when-not collapsed? (when-not collapsed?
@ -311,20 +313,24 @@
(and (>= scroll-height (+ height first-channel-height)) (and (>= scroll-height (+ height first-channel-height))
category))))) category)))))
(defn- community-scroll-page
[{:keys [joined]}]
(let [scroll-height (reagent/atom 0)
categories-heights (reagent/atom {})
first-channel-height (reagent/atom 0)
;; We track the initial value of joined ;; We track the initial value of joined
;; as we open the page to avoid switching ;; as we open the page to avoid switching
;; from not collapsed to collapsed if the ;; from not collapsed to collapsed if the
;; user is on this page ;; user is on this page
initial-joined? joined]
(fn [{:keys [id name images] :as community}] (defn- community-scroll-page
[_ initial-joined? _ _]
(let [scroll-height (reagent/atom 0)
categories-heights (reagent/atom {})
first-channel-height (reagent/atom 0)
on-category-layout (partial add-category-height categories-heights)
on-first-channel-height-changed (fn [height categories]
(swap! categories-heights select-keys categories)
(reset! first-channel-height height))]
(fn [id joined name images]
(let [cover {:uri (get-in images [:banner :uri])} (let [cover {:uri (get-in images [:banner :uri])}
logo {:uri (get-in images [:thumbnail :uri])} logo {:uri (get-in images [:thumbnail :uri])}
collapsed? (and initial-joined? (:joined community)) collapsed? (and initial-joined? joined)
overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))] overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))]
[scroll-page/scroll-page [scroll-page/scroll-page
{:cover-image cover {:cover-image cover
@ -347,24 +353,22 @@
@first-channel-height @first-channel-height
@categories-heights)}]} @categories-heights)}]}
[community-content [community-content
community id
{:on-category-layout (partial add-category-height categories-heights) {:on-category-layout on-category-layout
:collapsed? collapsed? :collapsed? collapsed?
:on-first-channel-height-changed :on-first-channel-height-changed
;; Here we set the height of the component and we filter out the categories, as some ;; Here we set the height of the component and we filter out the categories, as some
;; might have been removed. ;; might have been removed.
(fn [height categories] on-first-channel-height-changed}]]))))
(swap! categories-heights select-keys categories)
(reset! first-channel-height height))}]]))))
(defn- community-card-page-view (defn- community-card-page-view
[id] [id]
(let [{:keys [id joined] (let [{:keys [id joined name images]
:as community} (rf/sub [:communities/community id])] :as community} (rf/sub [:communities/community id])]
(when community (when community
(when joined (when joined
(rf/dispatch [:activity-center.notifications/dismiss-community-overview id])) (rf/dispatch [:activity-center.notifications/dismiss-community-overview id]))
[community-scroll-page community]))) [community-scroll-page id joined name images])))
(defn view (defn view
[id] [id]

View File

@ -311,25 +311,33 @@
:amount (wallet.utils/remove-trailing-zeroes amount) :amount (wallet.utils/remove-trailing-zeroes amount)
:img-src (get token-images sym)})) :img-src (get token-images sym)}))
(re-frame/reg-sub
:communities/checking-permissions-by-id
:<- [:communities/permissions-check]
(fn [permissions [_ id]]
(get permissions id)))
(re-frame/reg-sub (re-frame/reg-sub
:community/token-gated-overview :community/token-gated-overview
(fn [[_ community-id]] (fn [[_ community-id]]
[(re-frame/subscribe [:communities/community community-id])]) [(re-frame/subscribe [:communities/community community-id])
(fn [[{:keys [token-permissions-check checking-permissions? token-images]}] _] (re-frame/subscribe [:communities/checking-permissions-by-id community-id])])
(let [highest-role (:highestRole token-permissions-check) (fn [[{:keys [token-images]}
networks-not-supported? (:networksNotSupported token-permissions-check) {:keys [checking? check]}] _]
lowest-role (last (:roles token-permissions-check)) (let [highest-role (:highestRole check)
networks-not-supported? (:networksNotSupported check)
lowest-role (last (:roles check))
highest-permission-role (:type highest-role) highest-permission-role (:type highest-role)
can-request-access? (and (boolean highest-permission-role) (not networks-not-supported?))] can-request-access? (and (boolean highest-permission-role) (not networks-not-supported?))]
{:can-request-access? can-request-access? {:can-request-access? can-request-access?
:highest-permission-role highest-permission-role :highest-permission-role highest-permission-role
:networks-not-supported? networks-not-supported? :networks-not-supported? networks-not-supported?
:no-member-permission? (and highest-permission-role :no-member-permission? (and highest-permission-role
(not (-> token-permissions-check :highestRole :criteria))) (not (-> check :highestRole :criteria)))
:tokens (map (fn [{:keys [tokenRequirement]}] :tokens (map (fn [{:keys [tokenRequirement]}]
(map (map
(partial token-requirement->token (partial token-requirement->token
checking-permissions? checking?
token-images) token-images)
tokenRequirement)) tokenRequirement))
(or (:criteria highest-role) (or (:criteria highest-role)

View File

@ -383,35 +383,8 @@
(let (let
[checking-permissions? true [checking-permissions? true
token-image-eth "data:image/jpeg;base64,/9j/2w" token-image-eth "data:image/jpeg;base64,/9j/2w"
community {:id community-id checks {:checking? checking-permissions?
:checking-permissions? checking-permissions? :check
:permissions {:access 3}
:highest-permission-role constants/community-token-permission-become-admin
:token-images {"ETH" token-image-eth}
:name "Community super name"
:chats {"89f98a1e-6776-4e5f-8626-8ab9f855253f"
{:description "x"
:emoji "🎲"
:permissions {:access 1}
:color "#88B0FF"
:name "random"
:categoryID "0c3c64e7-d56e-439b-a3fb-a946d83cb056"
:id "89f98a1e-6776-4e5f-8626-8ab9f855253f"
:position 4
:can-post? false
:members {"0x04" {"roles" [1]}}}
"a076358e-4638-470e-a3fb-584d0a542ce6"
{:description "General channel for the community"
:emoji "🐷 "
:permissions {:access 1}
:color "#4360DF"
:name "general"
:categoryID "0c3c64e7-d56e-439b-a3fb-a946d83cb056"
:id "a076358e-4638-470e-a3fb-584d0a542ce6"
:position 0
:can-post? false
:members {"0x04" {"roles" [1]}}}}
:token-permissions-check
{:satisfied true {:satisfied true
:highestRole {:type constants/community-token-permission-become-admin :highestRole {:type constants/community-token-permission-become-admin
:criteria [{:tokenRequirement [{:satisfied true :criteria [{:tokenRequirement [{:satisfied true
@ -434,22 +407,52 @@
[{:address "0xd722eaa60dc73e334b588d34ba66a3b27e537783" [{:address "0xd722eaa60dc73e334b588d34ba66a3b27e537783"
:chainIds nil} :chainIds nil}
{:address "0x738d3146831c5871fa15872b409e8f360e341784" {:address "0x738d3146831c5871fa15872b409e8f360e341784"
:chainIds [5 420]}]} :chainIds [5 420]}]}}
:members {"0x04" {"roles" [1]}} community {:id community-id
:can-request-access? false :checking-permissions? checking-permissions?
:outroMessage "bla" :permissions {:access 3}
:verified false}] :highest-permission-role constants/community-token-permission-become-admin
:token-images {"ETH" token-image-eth}
:name "Community super name"
:chats {"89f98a1e-6776-4e5f-8626-8ab9f855253f"
{:description "x"
:emoji "🎲"
:permissions {:access 1}
:color "#88B0FF"
:name "random"
:categoryID "0c3c64e7-d56e-439b-a3fb-a946d83cb056"
:id "89f98a1e-6776-4e5f-8626-8ab9f855253f"
:position 4
:can-post? false
:members {"0x04" {"roles" [1]}}}
"a076358e-4638-470e-a3fb-584d0a542ce6"
{:description "General channel for the community"
:emoji "🐷 "
:permissions {:access 1}
:color "#4360DF"
:name "general"
:categoryID "0c3c64e7-d56e-439b-a3fb-a946d83cb056"
:id "a076358e-4638-470e-a3fb-584d0a542ce6"
:position 0
:can-post? false
:members {"0x04" {"roles" [1]}}}}
:members {"0x04" {"roles" [1]}}
:can-request-access? false
:outroMessage "bla"
:verified false}]
(swap! rf-db/app-db assoc-in [:communities community-id] community) (swap! rf-db/app-db assoc-in [:communities community-id] community)
(is (match? {:can-request-access? true (swap! rf-db/app-db assoc-in [:communities/permissions-check community-id] checks)
:tokens [[{:symbol "DAI" (is (match? {:can-request-access? true
:amount "5" :networks-not-supported? nil
:sufficient? true :tokens [[{:symbol "DAI"
:loading? checking-permissions?}] :amount "5"
[{:symbol "ETH" :sufficient? true
:amount "0.002" :loading? checking-permissions?}]
:sufficient? false [{:symbol "ETH"
:loading? checking-permissions? :amount "0.002"
:img-src token-image-eth}]]} :sufficient? false
:loading? checking-permissions?
:img-src token-image-eth}]]}
(rf/sub [sub-name community-id]))))) (rf/sub [sub-name community-id])))))
(h/deftest-sub :communities/airdrop-account (h/deftest-sub :communities/airdrop-account

View File

@ -148,6 +148,8 @@
(reg-root-key-sub :communities/selected-tab :communities/selected-tab) (reg-root-key-sub :communities/selected-tab :communities/selected-tab)
(reg-root-key-sub :contract-communities :contract-communities) (reg-root-key-sub :contract-communities :contract-communities)
(reg-root-key-sub :communities/permissioned-balances :communities/permissioned-balances) (reg-root-key-sub :communities/permissioned-balances :communities/permissioned-balances)
(reg-root-key-sub :communities/permissions-check :communities/permissions-check)
(reg-root-key-sub :communities/channel-permissions-check :communities/channel-permissions-check)
;;activity center ;;activity center
(reg-root-key-sub :activity-center :activity-center) (reg-root-key-sub :activity-center :activity-center)

View File

@ -3,7 +3,7 @@
"_comment": "Instead use: scripts/update-status-go.sh <rev>", "_comment": "Instead use: scripts/update-status-go.sh <rev>",
"owner": "status-im", "owner": "status-im",
"repo": "status-go", "repo": "status-go",
"version": "chore/debug-token-permissions", "version": "v0.174.5",
"commit-sha1": "b7b7660a534a01099e55ee0e4253f6a9531c7f02", "commit-sha1": "1ea2bd99d4c11f591df554c089aa9283b9742c59",
"src-sha256": "0nrmm3j9z6iwlr32mggd3xl63226drvvhrlrhrkgxcpgrgpixcfj" "src-sha256": "0b9411581gmxrrrbgbjk34db8xgz5qlhvrhp9hngggar1b7vmp1w"
} }