diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index 8129198861..bb6b0d3f2c 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/src/status_im2/contexts/chat/messages/list/view.cljs @@ -256,8 +256,8 @@ current-y (oops/oget event "nativeEvent.contentOffset.y")] (reanimated/set-shared-value scroll-y (- content-size-y current-y)))) -(defn messages-list-content - [{:keys [chat insets scroll-y cover-bg-color keyboard-shown?]}] +(defn f-messages-list-content + [{:keys [chat insets scroll-y cover-bg-color keyboard-shown? shared-all-loaded?]}] (let [shell-animation-complete? (rf/sub [:shell/animation-complete? (:chat-type chat)]) context (when shell-animation-complete? (rf/sub [:chats/current-chat-message-list-view-context])) @@ -267,6 +267,11 @@ (rf/sub [:chats/recording?])) all-loaded? (when shell-animation-complete? (rf/sub [:chats/all-loaded? (:chat-id chat)]))] + ;; NOTE(rasom): Top bar needs to react on `all-loaded?` only after messages + ;; rendering, otherwise animation flickers + (rn/use-effect (fn [] + (reset! shared-all-loaded? all-loaded?)) + [all-loaded?]) [rn/view {:style {:flex 1}} [rn/flat-list {:key-fn list-key-fn @@ -319,6 +324,7 @@ [{:keys [chat cover-bg-color header-comp footer-comp]}] (let [insets (safe-area/get-insets) scroll-y (reanimated/use-shared-value 0) + all-loaded? (reagent/atom false) {:keys [keyboard-height keyboard-shown]} (hooks/use-keyboard)] (rn/use-effect (fn [] @@ -332,14 +338,18 @@ :keyboard-vertical-offset (- (:bottom insets))} (when header-comp - [header-comp {:scroll-y scroll-y}]) + [header-comp + {:scroll-y scroll-y + :shared-all-loaded? all-loaded?}]) - [messages-list-content - {:chat chat - :insets insets - :scroll-y scroll-y - :cover-bg-color cover-bg-color - :keyboard-shown? keyboard-shown}] + [:f> + f-messages-list-content + {:chat chat + :insets insets + :scroll-y scroll-y + :cover-bg-color cover-bg-color + :keyboard-shown? keyboard-shown + :shared-all-loaded? all-loaded?}] (when footer-comp [footer-comp {:insets insets}])])) diff --git a/src/status_im2/contexts/chat/messages/navigation/view.cljs b/src/status_im2/contexts/chat/messages/navigation/view.cljs index 7e5f390bc3..f1b12c694d 100644 --- a/src/status_im2/contexts/chat/messages/navigation/view.cljs +++ b/src/status_im2/contexts/chat/messages/navigation/view.cljs @@ -14,11 +14,11 @@ [status-im2.common.home.actions.view :as actions])) (defn f-navigation-view - [{:keys [scroll-y]}] + [{:keys [scroll-y shared-all-loaded?]}] (let [{:keys [group-chat chat-id chat-name emoji chat-type] :as chat} (rf/sub [:chats/current-chat-chat-view]) - all-loaded? (rf/sub [:chats/all-loaded? chat-id]) + all-loaded? @shared-all-loaded? display-name (if (= chat-type constants/one-to-one-chat-type) (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])) (str emoji " " chat-name)) diff --git a/src/status_im2/contexts/chat/messages/view.cljs b/src/status_im2/contexts/chat/messages/view.cljs index c8ee3249fd..894fba6a40 100644 --- a/src/status_im2/contexts/chat/messages/view.cljs +++ b/src/status_im2/contexts/chat/messages/view.cljs @@ -25,8 +25,10 @@ [messages.list/messages-list {:cover-bg-color (colors/custom-color :turquoise 50 20) :chat chat - :header-comp (fn [{:keys [scroll-y]}] - [messages.navigation/navigation-view {:scroll-y scroll-y}]) + :header-comp (fn [{:keys [scroll-y shared-all-loaded?]}] + [messages.navigation/navigation-view + {:scroll-y scroll-y + :shared-all-loaded? shared-all-loaded?}]) :footer-comp (fn [{:keys [insets]}] (if-not able-to-send-message? [contact-requests.bottom-drawer/view chat-id contact-request-state