From d06af8b21c09d1c0500d5b1ee9f23eeba45c068a Mon Sep 17 00:00:00 2001 From: Ulises M Date: Wed, 20 Nov 2024 17:39:15 -0600 Subject: [PATCH] WIP: fix blinking in recent chats --- .../chat/home/chat_list_item/view.cljs | 24 ++--- src/status_im/contexts/chat/home/view.cljs | 96 +++++++++++-------- 2 files changed, 67 insertions(+), 53 deletions(-) diff --git a/src/status_im/contexts/chat/home/chat_list_item/view.cljs b/src/status_im/contexts/chat/home/chat_list_item/view.cljs index 7b59a7db2b..bb2ded9816 100644 --- a/src/status_im/contexts/chat/home/chat_list_item/view.cljs +++ b/src/status_im/contexts/chat/home/chat_list_item/view.cljs @@ -239,18 +239,19 @@ [{:keys [chat-id group-chat color name last-message timestamp muted image chat-type unviewed-messages-count] :as item}] - (let [[primary-name secondary-name] - (cond - group-chat - [name ""] + (let [[primary-name secondary-name] (cond + group-chat + [name ""] - (= chat-type constants/public-chat-type) - [(str "#" name) ""] + (= chat-type constants/public-chat-type) + [(str "#" name) ""] - :else - (rf/sub [:contacts/contact-two-names-by-identity chat-id])) - {:keys [ens-verified added?] :as contact} (when-not group-chat - (rf/sub [:contacts/contact-by-address chat-id])) + :else + (rf/sub [:contacts/contact-two-names-by-identity chat-id])) + + {:keys [ens-verified added?] + :as contact} (when-not group-chat + (rf/sub [:contacts/contact-by-address chat-id])) unread-messages? (pos? unviewed-messages-count)] [rn/view {:style {:flex-direction :row}} [avatar-view @@ -282,7 +283,8 @@ (defn chat-list-item [{:keys [chat-id chat-type] - :as item} theme] + :as item} + theme] (let [customization-color (rf/sub [:profile/customization-color])] [rn/touchable-highlight {:style style/container diff --git a/src/status_im/contexts/chat/home/view.cljs b/src/status_im/contexts/chat/home/view.cljs index 7cfa873d71..ff9eea7dd4 100644 --- a/src/status_im/contexts/chat/home/view.cljs +++ b/src/status_im/contexts/chat/home/view.cljs @@ -1,23 +1,24 @@ (ns status-im.contexts.chat.home.view (:require - [oops.core :as oops] - [quo.theme :as quo.theme] - [re-frame.core :as re-frame] - [react-native.core :as rn] - [react-native.reanimated :as reanimated] - [status-im.common.contact-list-item.view :as contact-list-item] - [status-im.common.contact-list.view :as contact-list] - [status-im.common.home.actions.view :as actions] - [status-im.common.home.banner.view :as common.banner] - [status-im.common.home.empty-state.view :as common.empty-state] - [status-im.common.home.header-spacing.view :as common.header-spacing] - [status-im.common.resources :as resources] - [status-im.contexts.chat.actions.view :as chat.actions.view] - [status-im.contexts.chat.home.chat-list-item.view :as chat-list-item] - [status-im.contexts.chat.home.contact-request.view :as contact-request] - [status-im.contexts.shell.constants :as shell.constants] - [utils.i18n :as i18n] - [utils.re-frame :as rf])) + [oops.core :as oops] + [quo.theme :as quo.theme] + [re-frame.core :as re-frame] + [react-native.core :as rn] + [react-native.reanimated :as reanimated] + [reagent.core :as reagent] + [status-im.common.contact-list-item.view :as contact-list-item] + [status-im.common.contact-list.view :as contact-list] + [status-im.common.home.actions.view :as actions] + [status-im.common.home.banner.view :as common.banner] + [status-im.common.home.empty-state.view :as common.empty-state] + [status-im.common.home.header-spacing.view :as common.header-spacing] + [status-im.common.resources :as resources] + [status-im.contexts.chat.actions.view :as chat.actions.view] + [status-im.contexts.chat.home.chat-list-item.view :as chat-list-item] + [status-im.contexts.chat.home.contact-request.view :as contact-request] + [status-im.contexts.shell.constants :as shell.constants] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) (defn get-item-layout [_ index] @@ -45,32 +46,43 @@ :description (i18n/label :t/no-messages-description) :image (resources/get-themed-image :cat-in-box theme)}}) +(defn external-component [item] + ;; TODO: Since this avoids the blinking, we need to check what else is wrong in other usages + (let [theme (quo.theme/use-theme)] + (def --item item) + (chat-list-item/chat-list-item item theme))) + (defn chats [{:keys [theme selected-tab set-scroll-ref scroll-shared-value]}] - (let [unfiltered-items (rf/sub [:chats/chats-stack-items]) - items (filter-and-sort-items-by-tab selected-tab unfiltered-items)] - (if (empty? items) - [common.empty-state/view - {:selected-tab selected-tab - :tab->content (empty-state-content theme)}] - [reanimated/flat-list - {:ref set-scroll-ref - :key-fn #(or (:chat-id %) (:public-key %) (:id %)) - :content-inset-adjustment-behavior :never - :header [common.header-spacing/view] - :get-item-layout get-item-layout - :on-end-reached #(re-frame/dispatch [:chat/show-more-chats]) - :keyboard-should-persist-taps :always - :data items - :render-fn (fn [item] - (chat-list-item/chat-list-item item theme)) - :scroll-event-throttle 8 - :content-container-style {:padding-bottom - shell.constants/floating-shell-button-height - :padding-top 8} - :on-scroll #(common.banner/set-scroll-shared-value - {:scroll-input (oops/oget % "nativeEvent.contentOffset.y") - :shared-value scroll-shared-value})}]))) + (let [items* (reagent/atom (filter-and-sort-items-by-tab selected-tab (rf/sub [:chats/chats-stack-items]))) + _ (def --i items*)] + + (fn [{:keys [theme selected-tab set-scroll-ref scroll-shared-value]}] + (let [;;unfiltered-items (rf/sub [:chats/chats-stack-items]) + ;;_ (reset! items* (filter-and-sort-items-by-tab selected-tab unfiltered-items)) + items @items*] + (if (empty? items) + [common.empty-state/view + {:selected-tab selected-tab + :tab->content (empty-state-content theme)}] + [reanimated/flat-list + {:ref set-scroll-ref + :key-fn #(or (:chat-id %) (:public-key %) (:id %)) + :content-inset-adjustment-behavior :never + :header [common.header-spacing/view] + :get-item-layout get-item-layout + :on-end-reached #(re-frame/dispatch [:chat/show-more-chats]) + :keyboard-should-persist-taps :always + :data items + :render-fn external-component #_(fn [item] + (chat-list-item/chat-list-item item theme)) + :scroll-event-throttle 8 + :content-container-style {:padding-bottom + shell.constants/floating-shell-button-height + :padding-top 8} + :on-scroll #(common.banner/set-scroll-shared-value + {:scroll-input (oops/oget % "nativeEvent.contentOffset.y") + :shared-value scroll-shared-value})}]))))) (defn contact-item-render [{:keys [public-key] :as item} theme]