diff --git a/src/status_im/contexts/chat/messenger/composer/effects.cljs b/src/status_im/contexts/chat/messenger/composer/effects.cljs index d3e689e0d9..02e0ff2401 100644 --- a/src/status_im/contexts/chat/messenger/composer/effects.cljs +++ b/src/status_im/contexts/chat/messenger/composer/effects.cljs @@ -114,9 +114,8 @@ [{:keys [input-ref]} {:keys [text-value saved-cursor-position cursor-position]} {:keys [edit input-with-mentions]} - messages-list-on-layout-finished?] - (let [mention? (some #(= :mention (first %)) (seq input-with-mentions)) - composer-just-opened? (not @messages-list-on-layout-finished?)] + chat-screen-layout-calculations-complete?] + (let [mention? (some #(= :mention (first %)) (seq input-with-mentions))] (rn/use-effect (fn [] (let [mention-text (reduce (fn [acc item] @@ -128,7 +127,9 @@ ;; NOTE: using text-value for cases when the user ;; leaves the app with an unfinished edit and re-opens ;; the chat. - (and (seq @text-value) composer-just-opened?) + (and (seq @text-value) + (not (reanimated/get-shared-value + chat-screen-layout-calculations-complete?))) @text-value :else (get-in edit [:content :text])) selection-pos (count edit-text) @@ -150,7 +151,9 @@ ;; UI. This way, `on-focus` will trigger first without changing the height, after which ;; `on-content-size-change` will animate the height of the input based on the injected ;; text. - (js/setTimeout #(do (when @messages-list-on-layout-finished? (.focus ^js @input-ref)) + (js/setTimeout #(do (when (reanimated/get-shared-value + chat-screen-layout-calculations-complete?) + (.focus ^js @input-ref)) (reagent/next-tick inject-edit-text)) 600)))) [(:message-id edit)]))) @@ -159,12 +162,12 @@ [{:keys [input-ref]} {:keys [container-opacity]} {:keys [reply]} - messages-list-on-layout-finished?] + chat-screen-layout-calculations-complete?] (rn/use-effect (fn [] (when reply (reanimated/animate container-opacity 1)) - (when (and reply @input-ref @messages-list-on-layout-finished?) + (when (and reply @input-ref (reanimated/get-shared-value chat-screen-layout-calculations-complete?)) (js/setTimeout #(.focus ^js @input-ref) 600))) [(:message-id reply)])) diff --git a/src/status_im/contexts/chat/messenger/composer/view.cljs b/src/status_im/contexts/chat/messenger/composer/view.cljs index 6d4e074587..aab0663da1 100644 --- a/src/status_im/contexts/chat/messenger/composer/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/view.cljs @@ -31,12 +31,12 @@ (defn sheet-component [{:keys [insets chat-list-scroll-y + chat-screen-layout-calculations-complete? window-height blur-height opacity background-y - theme - messages-list-on-layout-finished?]} props state] + theme]} props state] (let [subscriptions (utils/init-subs) content-height (reagent/atom (or (:input-content-height ; Actual text height subscriptions) @@ -75,8 +75,8 @@ animations dimensions subscriptions) - (effects/use-edit props state subscriptions messages-list-on-layout-finished?) - (effects/use-reply props animations subscriptions messages-list-on-layout-finished?) + (effects/use-edit props state subscriptions chat-screen-layout-calculations-complete?) + (effects/use-reply props animations subscriptions chat-screen-layout-calculations-complete?) (effects/update-input-mention props state subscriptions) (effects/link-previews props state animations subscriptions) (effects/use-images props state animations subscriptions) @@ -145,22 +145,20 @@ [:f> actions/view props state animations window-height insets subscriptions]]]]])) (defn f-composer - [{:keys [insets chat-list-scroll-y messages-list-on-layout-finished?]}] + [props] (let [window-height (:height (rn/get-window)) theme (quo.theme/use-theme-value) opacity (reanimated/use-shared-value 0) background-y (reanimated/use-shared-value (- window-height)) ; Y position of background ; overlay blur-height (reanimated/use-shared-value (+ constants/composer-default-height - (:bottom insets))) - extra-params {:insets insets - :window-height window-height - :chat-list-scroll-y chat-list-scroll-y - :blur-height blur-height - :opacity opacity - :background-y background-y - :theme theme - :messages-list-on-layout-finished? messages-list-on-layout-finished?} + (:bottom (:insets props)))) + extra-params (assoc props + :window-height window-height + :blur-height blur-height + :opacity opacity + :background-y background-y + :theme theme) props (utils/init-non-reactive-state) state (utils/init-reactive-state)] [rn/view (when platform/ios? {:style {:z-index 1}}) 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 58b674322c..d2b156cc73 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/view.cljs @@ -267,7 +267,7 @@ (defn on-layout [{:keys [event layout-height distance-atom distance-from-list-top - calculations-complete? messages-list-on-layout-finished?]}] + chat-screen-layout-calculations-complete?]}] (let [layout-height-new (oops/oget event "nativeEvent.layout.height") change (- layout-height-new @layout-height) new-distance (- @distance-atom change)] @@ -275,9 +275,8 @@ (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))) + (when-not (reanimated/get-shared-value chat-screen-layout-calculations-complete?) + (reanimated/set-shared-value chat-screen-layout-calculations-complete? true)))) (defn on-scroll-fn [distance-atom layout-height-atom] @@ -288,7 +287,7 @@ (defn f-messages-list-content [{:keys [insets distance-from-list-top content-height layout-height cover-bg-color distance-atom - calculations-complete? messages-list-on-layout-finished? chat-list-scroll-y]}] + chat-screen-layout-calculations-complete? chat-list-scroll-y]}] (let [theme (quo.theme/use-theme-value) chat (rf/sub [:chats/current-chat-chat-view]) {:keys [keyboard-shown]} (hooks/use-keyboard) @@ -351,8 +350,7 @@ :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?}) + :chat-screen-layout-calculations-complete? + chat-screen-layout-calculations-complete?}) :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 dc4ce18287..10197c47a8 100644 --- a/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/navigation/view.cljs @@ -18,7 +18,7 @@ [utils.worklets.chat.messenger.navigation :as worklets])) (defn f-header-content-container - [{:keys [chat distance-from-list-top all-loaded? calculations-complete?]}] + [{:keys [chat distance-from-list-top all-loaded? chat-screen-layout-calculations-complete?]}] (let [{:keys [chat-id group-chat chat-type chat-name emoji]} chat display-name (cond @@ -34,7 +34,7 @@ header-opacity (worklets/navigation-header-opacity distance-from-list-top all-loaded? - calculations-complete? + chat-screen-layout-calculations-complete? (if platform/ios? messages.constants/content-animation-start-position-ios messages.constants/content-animation-start-position-android)) @@ -104,7 +104,7 @@ :top-offset navigation-view-height}]])) (defn f-view - [{:keys [distance-from-list-top calculations-complete?]}] + [{:keys [distance-from-list-top chat-screen-layout-calculations-complete?]}] (let [{:keys [chat-id chat-type] :as chat} (rf/sub [:chats/current-chat-chat-view]) all-loaded? (reanimated/use-shared-value false) all-loaded-sub (rf/sub [:chats/all-loaded? chat-id]) @@ -129,10 +129,10 @@ :on-press #(rf/dispatch [:navigate-back])} (if (= chat-type constants/community-chat-type) :i/arrow-left :i/close)] [:f> f-header-content-container - {:chat chat - :distance-from-list-top distance-from-list-top - :all-loaded? all-loaded? - :calculations-complete? calculations-complete?}] + {:chat chat + :distance-from-list-top distance-from-list-top + :all-loaded? all-loaded? + :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?}] [quo/button {:icon-only? true :type :grey diff --git a/src/status_im/contexts/chat/messenger/messages/view.cljs b/src/status_im/contexts/chat/messenger/messages/view.cljs index 7726884662..d67ff8903a 100644 --- a/src/status_im/contexts/chat/messenger/messages/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/view.cljs @@ -3,7 +3,6 @@ [react-native.core :as rn] [react-native.reanimated :as reanimated] [react-native.safe-area :as safe-area] - [reagent.core :as reagent] [status-im.contexts.chat.messenger.composer.view :as composer.view] [status-im.contexts.chat.messenger.messages.list.style :as style] [status-im.contexts.chat.messenger.messages.list.view :as list.view] @@ -15,49 +14,47 @@ ;; improvement. Please avoid refactoring these files. Also if you are not already working on bug ;; fixes related to the composer, please skip them. And ping me, so I can address them while refactoring (defn- f-chat-screen - [calculations-complete?] - (let [insets (safe-area/get-insets) - content-height (atom 0) - layout-height (atom 0) - distance-atom (atom 0) - messages-list-on-layout-finished? (reagent/atom false) - distance-from-list-top (reanimated/use-shared-value 0) - chat-list-scroll-y (reanimated/use-shared-value 0)] + [chat-screen-layout-calculations-complete?] + (let [insets (safe-area/get-insets) + content-height (atom 0) + layout-height (atom 0) + distance-atom (atom 0) + distance-from-list-top (reanimated/use-shared-value 0) + chat-list-scroll-y (reanimated/use-shared-value 0)] [rn/keyboard-avoiding-view {:style style/keyboard-avoiding-container :keyboard-vertical-offset (- (:bottom insets))} [:f> messages.navigation/f-view - {:distance-from-list-top distance-from-list-top - :calculations-complete? calculations-complete?}] + {:distance-from-list-top distance-from-list-top + :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?}] [:f> list.view/f-messages-list-content - {:insets insets - :layout-height layout-height - :content-height content-height - :distance-atom distance-atom - :calculations-complete? calculations-complete? - :distance-from-list-top distance-from-list-top - :chat-list-scroll-y chat-list-scroll-y - :messages-list-on-layout-finished? messages-list-on-layout-finished? - :cover-bg-color :turquoise}] + {:insets insets + :layout-height layout-height + :content-height content-height + :distance-atom distance-atom + :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete? + :distance-from-list-top distance-from-list-top + :chat-list-scroll-y chat-list-scroll-y + :cover-bg-color :turquoise}] [composer.view/composer - {:insets insets - :chat-list-scroll-y chat-list-scroll-y - :messages-list-on-layout-finished? messages-list-on-layout-finished?}]])) + {:insets insets + :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete? + :chat-list-scroll-y chat-list-scroll-y}]])) (defn lazy-chat-screen - [calculations-complete?] + [chat-screen-layout-calculations-complete?] (let [screen-loaded? (rf/sub [:shell/chat-screen-loaded?])] (when-not screen-loaded? - (reanimated/set-shared-value calculations-complete? false)) + (reanimated/set-shared-value chat-screen-layout-calculations-complete? false)) (when screen-loaded? - [:f> f-chat-screen calculations-complete?]))) + [:f> f-chat-screen chat-screen-layout-calculations-complete?]))) (defn- f-chat [] - (let [calculations-complete? (reanimated/use-shared-value false)] + (let [chat-screen-layout-calculations-complete? (reanimated/use-shared-value false)] [:<> - [lazy-chat-screen calculations-complete?] - [:f> placeholder.view/f-view calculations-complete?]])) + [lazy-chat-screen chat-screen-layout-calculations-complete?] + [:f> placeholder.view/f-view chat-screen-layout-calculations-complete?]])) (defn chat [] diff --git a/src/status_im/contexts/chat/messenger/placeholder/view.cljs b/src/status_im/contexts/chat/messenger/placeholder/view.cljs index 9a6c6420b3..416c1b2229 100644 --- a/src/status_im/contexts/chat/messenger/placeholder/view.cljs +++ b/src/status_im/contexts/chat/messenger/placeholder/view.cljs @@ -15,9 +15,9 @@ :animated? false}]) (defn f-view - [calculations-complete?] + [chat-screen-layout-calculations-complete?] (let [top (safe-area/get-top) - opacity (worklets/placeholder-opacity calculations-complete?) - z-index (worklets/placeholder-z-index calculations-complete?)] + opacity (worklets/placeholder-opacity chat-screen-layout-calculations-complete?) + z-index (worklets/placeholder-z-index chat-screen-layout-calculations-complete?)] [reanimated/view {:style (style/container top opacity z-index)} [loading-skeleton]])) diff --git a/src/utils/worklets/chat/messenger/navigation.cljs b/src/utils/worklets/chat/messenger/navigation.cljs index d78b5014ee..60b1d4f087 100644 --- a/src/utils/worklets/chat/messenger/navigation.cljs +++ b/src/utils/worklets/chat/messenger/navigation.cljs @@ -3,11 +3,11 @@ (def ^:private worklets (js/require "../src/js/worklets/chat/messenger/navigation.js")) (defn navigation-header-opacity - [distance-from-list-top all-loaded? calculations-complete? start-position] + [distance-from-list-top all-loaded? chat-screen-layout-calculations-complete? start-position] (.navigationHeaderOpacity ^js worklets distance-from-list-top all-loaded? - calculations-complete? + chat-screen-layout-calculations-complete? start-position)) (defn navigation-header-position diff --git a/src/utils/worklets/chat/messenger/placeholder.cljs b/src/utils/worklets/chat/messenger/placeholder.cljs index 0640be76fb..ed7ff5ec45 100644 --- a/src/utils/worklets/chat/messenger/placeholder.cljs +++ b/src/utils/worklets/chat/messenger/placeholder.cljs @@ -3,9 +3,9 @@ (def ^:private worklets (js/require "../src/js/worklets/chat/messenger/placeholder.js")) (defn placeholder-opacity - [calculations-complete?] - (.placeholderOpacity ^js worklets calculations-complete?)) + [chat-screen-layout-calculations-complete?] + (.placeholderOpacity ^js worklets chat-screen-layout-calculations-complete?)) (defn placeholder-z-index - [calculations-complete?] - (.placeholderZIndex ^js worklets calculations-complete?)) + [chat-screen-layout-calculations-complete?] + (.placeholderZIndex ^js worklets chat-screen-layout-calculations-complete?))