Don't load chat view until chat is fetched (#19988)

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
@@ -230,7 +230,7 @@
   (let [theme                 (quo.theme/use-theme)
         {:keys [chat-id chat-name emoji chat-type
                 group-chat color description
-                last-message]} chat
+                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]))
@@ -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]

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])]
+  (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]]))
+       [composer.view/composer props]])))
 
 (defn lazy-chat-screen
   [chat-screen-layout-calculations-complete?]

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
@@ -19,7 +20,12 @@
   [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]]))

src/status_im/subs/chats.cljs

@@ -169,6 +169,7 @@
  :chats/current-chat-chat-view
  :<- [:chats/current-chat]
  (fn [current-chat]
+   (assoc
     (select-keys current-chat
                  [:chat-id
                   :able-to-send-message?
@@ -184,8 +185,15 @@
                   :synced-from
                   :community-id
                   :emoji
-                 :description
+                  :description])
-                 :last-message])))
+    :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

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