From 020822474133fb9c8062d6678a7d99e85a7200be Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Mon, 8 Jan 2024 18:12:07 +0530 Subject: [PATCH] fix delayed display of top bar in chat after sending messages (#18300) --- src/js/worklets/chat/messages.js | 5 +- .../chat/messenger/messages/constants.cljs | 3 +- .../chat/messenger/messages/list/view.cljs | 96 ++++++++++--------- .../messenger/messages/navigation/view.cljs | 8 +- .../chat/messenger/messages/view.cljs | 6 +- 5 files changed, 66 insertions(+), 52 deletions(-) diff --git a/src/js/worklets/chat/messages.js b/src/js/worklets/chat/messages.js index 16923bf551..bc08b4d9aa 100644 --- a/src/js/worklets/chat/messages.js +++ b/src/js/worklets/chat/messages.js @@ -45,8 +45,9 @@ export function messagesListOnScroll(distanceFromListTop, callback) { const currentY = event.contentOffset.y; const layoutHeight = event.layoutMeasurement.height; const contentSizeY = event.contentSize.height - layoutHeight; - distanceFromListTop.value = contentSizeY - currentY; - runOnJS(callback)(currentY, layoutHeight); + const newDistance = contentSizeY - currentY; + distanceFromListTop.value = newDistance; + runOnJS(callback)(currentY, layoutHeight, newDistance); }; } diff --git a/src/status_im/contexts/chat/messenger/messages/constants.cljs b/src/status_im/contexts/chat/messenger/messages/constants.cljs index c7f8152867..9b8080292c 100644 --- a/src/status_im/contexts/chat/messenger/messages/constants.cljs +++ b/src/status_im/contexts/chat/messenger/messages/constants.cljs @@ -6,7 +6,8 @@ (def ^:const header-container-top-margin 48) (def ^:const header-container-radius 20) (def ^:const header-animation-distance 20) -(def ^:const content-animation-start-position 110) +(def ^:const content-animation-start-position-android 130) +(def ^:const content-animation-start-position-ios 124) ;; Note - We should also consider height of bio for banner animation starting position ;; Todo - Should be updated once New-profile implemation is complete (def ^:const pinned-banner-animation-start-position 148) diff --git a/src/status_im/contexts/chat/messenger/messages/list/view.cljs b/src/status_im/contexts/chat/messenger/messages/list/view.cljs index 656b05ebc5..1547c47d36 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/view.cljs @@ -39,11 +39,14 @@ {:animated true}))) (defn on-scroll-fn - [show-floating-scroll-down-button?] - (fn [y layout-height] + [show-floating-scroll-down-button? distance-atom layout-height-atom] + (fn [y layout-height new-distance] (let [threshold-height (* (/ layout-height 100) threshold-percentage-to-show-floating-scroll-down-button) reached-threshold? (> y threshold-height)] + (when (not= layout-height @layout-height-atom) + (reset! layout-height-atom layout-height)) + (reset! distance-atom new-distance) (when (not= reached-threshold? @show-floating-scroll-down-button?) (rn/configure-next (:ease-in-ease-out rn/layout-animation-presets)) (reset! show-floating-scroll-down-button? reached-threshold?))))) @@ -272,44 +275,42 @@ [message/message message-data context keyboard-shown?]))) (defn on-content-size-change - [{:keys [distance-from-list-top window-height content-height calculations-complete?]}] + [{:keys [content-height distance-atom distance-from-list-top]}] (fn [_ content-height-new] - (let [change (- content-height-new @content-height) - distance (if (reanimated/get-shared-value calculations-complete?) - (+ (reanimated/get-shared-value distance-from-list-top) change) - (- content-height-new window-height))] - (reanimated/set-shared-value distance-from-list-top distance) - (reset! content-height content-height-new)) - (when-not (reanimated/get-shared-value calculations-complete?) - (js/setTimeout #(reanimated/set-shared-value calculations-complete? true) 10)))) + ;; Updates to shared values are asynchronous and give the wrong value when accessed + ;; simultaneously(in on-layout event), that's why we are using distance atom here + (let [change (- content-height-new @content-height) + new-distance (+ @distance-atom change)] + (when-not (= change 0) + (reanimated/set-shared-value distance-from-list-top new-distance) + (reset! distance-atom new-distance) + (reset! content-height content-height-new))))) -(defn keyboard-offset - [distance-from-list-top keyboard-shown keyboard-height keyboard-offset?] - ;; Note - keyboard fires multiple events, we are making sure we only offset once - (when (> keyboard-height 0) - (let [current-distance-from-top (reanimated/get-shared-value distance-from-list-top)] - (when (and keyboard-shown (not @keyboard-offset?)) - (reanimated/set-shared-value distance-from-list-top - (+ current-distance-from-top keyboard-height)) - (reset! keyboard-offset? true)) - (when (and (not keyboard-shown) @keyboard-offset?) - (reanimated/set-shared-value distance-from-list-top - (- current-distance-from-top keyboard-height)) - (reset! keyboard-offset? false))))) +(defn on-layout + [{:keys [event layout-height distance-atom distance-from-list-top + calculations-complete? messages-list-on-layout-finished?]}] + (let [layout-height-new (oops/oget event "nativeEvent.layout.height") + change (- layout-height-new @layout-height) + new-distance (- @distance-atom change)] + (when (and (not= change 0) (not= @layout-height layout-height-new)) + (reanimated/set-shared-value distance-from-list-top new-distance) + (reset! distance-atom new-distance) + (reset! layout-height layout-height-new)) + (when-not (reanimated/get-shared-value calculations-complete?) + (reanimated/set-shared-value calculations-complete? true)) + (js/setTimeout #(reset! messages-list-on-layout-finished? true) 1000))) (defn f-messages-list-content - [{:keys [insets distance-from-list-top keyboard-offset? content-height cover-bg-color - show-floating-scroll-down-button? calculations-complete? - messages-list-on-layout-finished?]}] - (let [theme (quo.theme/use-theme-value) - chat (rf/sub [:chats/current-chat-chat-view]) - {:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard) - {window-height :height} (rn/get-window) - context (rf/sub [:chats/current-chat-message-list-view-context]) - messages (rf/sub [:chats/raw-chat-messages-stream - (:chat-id chat)]) - recording? (rf/sub [:chats/recording?])] - (keyboard-offset distance-from-list-top keyboard-shown keyboard-height keyboard-offset?) + [{:keys [insets distance-from-list-top content-height layout-height cover-bg-color distance-atom + show-floating-scroll-down-button? calculations-complete? messages-list-on-layout-finished?]}] + (let [theme (quo.theme/use-theme-value) + chat (rf/sub [:chats/current-chat-chat-view]) + {:keys [keyboard-shown]} (hooks/use-keyboard) + {window-height :height} (rn/get-window) + context (rf/sub [:chats/current-chat-message-list-view-context]) + messages (rf/sub [:chats/raw-chat-messages-stream + (:chat-id chat)]) + recording? (rf/sub [:chats/recording?])] [rn/view {:style {:flex 3}} ;; Pushes composer to bottom [rn/view {:style {:flex-shrink 1}} ;; Keeps flat list on top [reanimated/flat-list @@ -334,10 +335,9 @@ :render-fn render-fn :on-viewable-items-changed on-viewable-items-changed :on-content-size-change (on-content-size-change - {:distance-from-list-top distance-from-list-top - :window-height window-height - :content-height content-height - :calculations-complete? calculations-complete?}) + {:content-height content-height + :distance-atom distance-atom + :distance-from-list-top distance-from-list-top}) :on-end-reached #(list-on-end-reached distance-from-list-top) :on-scroll-to-index-failed identity :scroll-indicator-insets {:top (if (:able-to-send-message? context) @@ -354,14 +354,20 @@ :on-scroll (reanimated/use-animated-scroll-handler (worklets/messages-list-on-scroll distance-from-list-top - (on-scroll-fn show-floating-scroll-down-button?))) + (on-scroll-fn show-floating-scroll-down-button? + distance-atom + layout-height))) :style {:background-color (colors/theme-colors colors/white colors/neutral-95 theme)} :inverted true - :on-layout (fn [_] - (js/setTimeout #(reset! messages-list-on-layout-finished? - true) - 1000)) + :on-layout #(on-layout + {:event % + :layout-height layout-height + :distance-atom distance-atom + :distance-from-list-top distance-from-list-top + :calculations-complete? calculations-complete? + :messages-list-on-layout-finished? + messages-list-on-layout-finished?}) :scroll-enabled (not recording?) :content-inset-adjustment-behavior :never}]]])) diff --git a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs index 5318a07d20..e4a72a2c6b 100644 --- a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs @@ -35,12 +35,16 @@ distance-from-list-top all-loaded? calculations-complete? - messages.constants/content-animation-start-position) + (if platform/ios? + messages.constants/content-animation-start-position-ios + messages.constants/content-animation-start-position-android)) header-position (worklets/navigation-header-position distance-from-list-top all-loaded? messages.constants/top-bar-height - messages.constants/content-animation-start-position)] + (if platform/ios? + messages.constants/content-animation-start-position-ios + messages.constants/content-animation-start-position-android))] [reanimated/view {:style (style/header-content-container header-opacity header-position)} (when-not group-chat diff --git a/src/status_im/contexts/chat/messenger/messages/view.cljs b/src/status_im/contexts/chat/messenger/messages/view.cljs index 75979b5d64..26a1bc4e50 100644 --- a/src/status_im/contexts/chat/messenger/messages/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/view.cljs @@ -17,8 +17,9 @@ (defn- f-chat-screen [calculations-complete?] (let [insets (safe-area/get-insets) - keyboard-offset? (atom false) content-height (atom 0) + layout-height (atom 0) + distance-atom (atom 0) show-floating-scroll-down-button? (reagent/atom false) messages-list-on-layout-finished? (reagent/atom false) distance-from-list-top (reanimated/use-shared-value 0)] @@ -30,8 +31,9 @@ :calculations-complete? calculations-complete?}] [:f> list.view/f-messages-list-content {:insets insets + :layout-height layout-height :content-height content-height - :keyboard-offset? keyboard-offset? + :distance-atom distance-atom :calculations-complete? calculations-complete? :distance-from-list-top distance-from-list-top :messages-list-on-layout-finished? messages-list-on-layout-finished?