[#16156] Fix top bar flashing

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
+(defn f-messages-list-content
-  [{:keys [chat insets scroll-y cover-bg-color keyboard-shown?]}]
+  [{: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
+     [:f>
-      {:chat            chat
+      f-messages-list-content
-       :insets          insets
+      {:chat               chat
-       :scroll-y        scroll-y
+       :insets             insets
-       :cover-bg-color  cover-bg-color
+       :scroll-y           scroll-y
-       :keyboard-shown? keyboard-shown}]
+       :cover-bg-color     cover-bg-color
+       :keyboard-shown?    keyboard-shown
+       :shared-all-loaded? all-loaded?}]
 
      (when footer-comp
        [footer-comp {:insets insets}])]))

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

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]}]
+      :header-comp    (fn [{:keys [scroll-y shared-all-loaded?]}]
-                        [messages.navigation/navigation-view {:scroll-y scroll-y}])
+                        [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