From 4c84dd4a1b5bfa5db79b7ba67b35f88418ae3efc Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Fri, 17 May 2024 19:31:29 +0530 Subject: [PATCH] Don't load chat view until chat is fetched (#19988) --- .../chat/messenger/messages/list/view.cljs | 94 +++++++++---------- .../chat/messenger/messages/view.cljs | 16 ++-- .../chat/messenger/placeholder/view.cljs | 14 ++- src/status_im/subs/chats.cljs | 42 +++++---- src/status_im/subs/chats_test.cljs | 15 +++ 5 files changed, 106 insertions(+), 75 deletions(-) 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 bea9aab78b..adc6718154 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/view.cljs @@ -114,20 +114,20 @@ (defn list-footer-avatar [{:keys [distance-from-list-top display-name online? profile-picture theme group-chat color - emoji chat-type chat-name last-message]}] + emoji chat-type chat-name empty-chat?]}] (let [scale (reanimated/interpolate distance-from-list-top - [0 (if (seq last-message) messages.constants/header-container-top-margin 0)] + [0 (if empty-chat? 0 messages.constants/header-container-top-margin)] [1 0.4] messages.constants/default-extrapolation-option) top (reanimated/interpolate distance-from-list-top - [0 (if (seq last-message) messages.constants/header-container-top-margin 0)] + [0 (if empty-chat? 0 messages.constants/header-container-top-margin)] [-44 -12] messages.constants/default-extrapolation-option) left (reanimated/interpolate distance-from-list-top - [0 (if (seq last-message) messages.constants/header-container-top-margin 0)] + [0 (if empty-chat? 0 messages.constants/header-container-top-margin)] [16 -8] messages.constants/default-extrapolation-option) community-channel? (= chat-type constants/community-chat-type)] @@ -155,15 +155,15 @@ :size :big}])])) (defn chat-display-name - [{:keys [distance-from-list-top display-name contact theme last-message]}] + [{:keys [distance-from-list-top display-name contact theme empty-chat?]}] (let [top (reanimated/interpolate distance-from-list-top - [0 (if (seq last-message) messages.constants/header-container-top-margin 0)] + [0 (if empty-chat? 0 messages.constants/header-container-top-margin)] [0 -35] messages.constants/default-extrapolation-option) left (reanimated/interpolate distance-from-list-top - [0 (if (seq last-message) messages.constants/header-container-top-margin 0)] + [0 (if empty-chat? 0 messages.constants/header-container-top-margin)] [0 40] messages.constants/default-extrapolation-option)] [reanimated/view @@ -212,11 +212,11 @@ muted?)))}]}])) (defn bio-and-actions - [{:keys [distance-from-list-top bio chat-id customization-color last-message description]}] + [{:keys [distance-from-list-top bio chat-id customization-color empty-chat? description]}] (let [has-bio (seq (or bio description)) top (reanimated/interpolate distance-from-list-top - [0 (if (seq last-message) messages.constants/header-container-top-margin 0)] + [0 (if empty-chat? 0 messages.constants/header-container-top-margin)] [(if has-bio 8 16) (if has-bio -28 -20)] messages.constants/default-extrapolation-option)] [reanimated/view @@ -227,43 +227,43 @@ (defn footer-component [{:keys [chat distance-from-list-top customization-color]}] - (let [theme (quo.theme/use-theme) + (let [theme (quo.theme/use-theme) {:keys [chat-id chat-name emoji chat-type group-chat color description - last-message]} chat - display-name (cond - (= chat-type constants/one-to-one-chat-type) - (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])) - (= chat-type constants/community-chat-type) - (str "# " chat-name) - :else (str emoji chat-name)) - {:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id]) - online? (rf/sub [:visibility-status-updates/online? chat-id]) - contact (when-not group-chat - (rf/sub [:contacts/contact-by-address chat-id])) - photo-path (if group-chat - (rf/sub [:chats/group-chat-image chat-id]) - (rf/sub [:chats/photo-path chat-id])) - top-margin (+ (safe-area/get-top) - messages.constants/top-bar-height - messages.constants/header-container-top-margin - 32) - background-color (colors/theme-colors - (colors/resolve-color customization-color theme 20) - (colors/resolve-color customization-color theme 40) - theme) - bottom (reanimated/interpolate - distance-from-list-top - [0 messages.constants/header-container-top-margin] - [32 -4] - messages.constants/default-extrapolation-option) - background-opacity (reanimated/interpolate - distance-from-list-top - [messages.constants/header-container-top-margin - (+ messages.constants/header-animation-distance - messages.constants/header-container-top-margin)] - [1 0] - messages.constants/default-extrapolation-option)] + empty-chat?]} chat + display-name (cond + (= chat-type constants/one-to-one-chat-type) + (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])) + (= chat-type constants/community-chat-type) + (str "# " chat-name) + :else (str emoji chat-name)) + {:keys [bio]} (rf/sub [:contacts/contact-by-identity chat-id]) + online? (rf/sub [:visibility-status-updates/online? chat-id]) + contact (when-not group-chat + (rf/sub [:contacts/contact-by-address chat-id])) + photo-path (if group-chat + (rf/sub [:chats/group-chat-image chat-id]) + (rf/sub [:chats/photo-path chat-id])) + top-margin (+ (safe-area/get-top) + messages.constants/top-bar-height + messages.constants/header-container-top-margin + 32) + background-color (colors/theme-colors + (colors/resolve-color customization-color theme 20) + (colors/resolve-color customization-color theme 40) + theme) + bottom (reanimated/interpolate + distance-from-list-top + [0 messages.constants/header-container-top-margin] + [32 -4] + messages.constants/default-extrapolation-option) + background-opacity (reanimated/interpolate + distance-from-list-top + [messages.constants/header-container-top-margin + (+ messages.constants/header-animation-distance + messages.constants/header-container-top-margin)] + [1 0] + messages.constants/default-extrapolation-option)] [:<> [reanimated/view {:style (style/background-container background-color background-opacity top-margin)}] @@ -281,21 +281,21 @@ :emoji emoji :chat-type chat-type :chat-name chat-name - :last-message last-message}] + :empty-chat? empty-chat?}] [chat-display-name {:distance-from-list-top distance-from-list-top :display-name display-name :theme theme :contact contact :group-chat group-chat - :last-message last-message}] + :empty-chat? empty-chat?}] [bio-and-actions {:distance-from-list-top distance-from-list-top :bio bio :chat-id chat-id :customization-color customization-color :description description - :last-message last-message}]]]])) + :empty-chat? empty-chat?}]]]])) (defn list-footer [props] diff --git a/src/status_im/contexts/chat/messenger/messages/view.cljs b/src/status_im/contexts/chat/messenger/messages/view.cljs index 8f1254ccd2..98f7457fcb 100644 --- a/src/status_im/contexts/chat/messenger/messages/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/view.cljs @@ -13,13 +13,15 @@ (defn- chat-screen [{:keys [insets] :as props}] - (let [alert-banners-top-margin (rf/sub [:alert-banners/top-margin])] - [rn/keyboard-avoiding-view - {:style style/keyboard-avoiding-container - :keyboard-vertical-offset (- (if platform/ios? alert-banners-top-margin 0) (:bottom insets))} - [list.view/messages-list-content props] - [messages.navigation/view props] - [composer.view/composer props]])) + (let [alert-banners-top-margin (rf/sub [:alert-banners/top-margin]) + chat-exist? (rf/sub [:chats/current-chat-exist?])] + (when chat-exist? + [rn/keyboard-avoiding-view + {:style style/keyboard-avoiding-container + :keyboard-vertical-offset (- (if platform/ios? alert-banners-top-margin 0) (:bottom insets))} + [list.view/messages-list-content props] + [messages.navigation/view props] + [composer.view/composer props]]))) (defn lazy-chat-screen [chat-screen-layout-calculations-complete?] diff --git a/src/status_im/contexts/chat/messenger/placeholder/view.cljs b/src/status_im/contexts/chat/messenger/placeholder/view.cljs index 729997b1ec..a17d2a99eb 100644 --- a/src/status_im/contexts/chat/messenger/placeholder/view.cljs +++ b/src/status_im/contexts/chat/messenger/placeholder/view.cljs @@ -6,6 +6,7 @@ [react-native.reanimated :as reanimated] [react-native.safe-area :as safe-area] [status-im.contexts.chat.messenger.placeholder.style :as style] + [utils.re-frame :as rf] [utils.worklets.chat.messenger.placeholder :as worklets])) (defn- loading-skeleton @@ -17,9 +18,14 @@ (defn view [chat-screen-layout-calculations-complete?] - (let [theme (quo.theme/use-theme) - top (safe-area/get-top) - opacity (worklets/placeholder-opacity chat-screen-layout-calculations-complete?) - z-index (worklets/placeholder-z-index chat-screen-layout-calculations-complete?)] + (let [theme (quo.theme/use-theme) + top (safe-area/get-top) + chat-exist? (rf/sub [:chats/current-chat-exist?]) + 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 theme)} + (when-not chat-exist? + [quo/page-nav + {:icon-name :i/arrow-left + :on-press #(rf/dispatch [:navigate-back])}]) [loading-skeleton]])) diff --git a/src/status_im/subs/chats.cljs b/src/status_im/subs/chats.cljs index 3409d22a26..b804fb4977 100644 --- a/src/status_im/subs/chats.cljs +++ b/src/status_im/subs/chats.cljs @@ -169,23 +169,31 @@ :chats/current-chat-chat-view :<- [:chats/current-chat] (fn [current-chat] - (select-keys current-chat - [:chat-id - :able-to-send-message? - :group-chat - :admins - :invitation-admin - :public? - :chat-type - :color - :contact-request-state - :chat-name - :synced-to - :synced-from - :community-id - :emoji - :description - :last-message]))) + (assoc + (select-keys current-chat + [:chat-id + :able-to-send-message? + :group-chat + :admins + :invitation-admin + :public? + :chat-type + :color + :contact-request-state + :chat-name + :synced-to + :synced-from + :community-id + :emoji + :description]) + :empty-chat? + (not (:last-message current-chat))))) + +(re-frame/reg-sub + :chats/current-chat-exist? + :<- [:chats/current-chat-chat-view] + (fn [current-chat] + (boolean (:chat-id current-chat)))) (re-frame/reg-sub :chats/current-chat-color diff --git a/src/status_im/subs/chats_test.cljs b/src/status_im/subs/chats_test.cljs index 3777d7700e..63fa0f98e1 100644 --- a/src/status_im/subs/chats_test.cljs +++ b/src/status_im/subs/chats_test.cljs @@ -192,3 +192,18 @@ chats) (let [result (rf/sub [sub-name chat-id])] (= image-data result))))) + +(h/deftest-sub :chats/current-chat-exist? + [sub-name] + (testing "current chat without chat-id" + (let [chats {chat-id (dissoc one-to-one-chat :chat-id)}] + (swap! rf-db/app-db assoc + :chats chats + :current-chat-id chat-id) + (is (false? (rf/sub [sub-name]))))) + (testing "current chat with chat-id" + (let [chats {chat-id one-to-one-chat}] + (swap! rf-db/app-db assoc + :chats chats + :current-chat-id chat-id) + (is (true? (rf/sub [sub-name]))))))