WIP: fix blinking in recent chats

This commit is contained in:
Ulises M 2024-11-20 17:39:15 -06:00
parent ac0a115f1d
commit d06af8b21c
No known key found for this signature in database
GPG Key ID: 5A15782EB758534E
2 changed files with 67 additions and 53 deletions

View File

@ -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

View File

@ -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]