WIP: fix blinking in recent chats

src/status_im/contexts/chat/home/chat_list_item/view.cljs

@@ -239,8 +239,7 @@
   [{:keys [chat-id group-chat color name last-message timestamp muted image
            chat-type unviewed-messages-count]
     :as   item}]
-  (let [[primary-name secondary-name]
+  (let [[primary-name secondary-name] (cond
-        (cond
                                         group-chat
                                         [name ""]
 
@@ -249,7 +248,9 @@
 
                                         :else
                                         (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
-        {:keys [ens-verified added?] :as contact} (when-not group-chat
+
+        {:keys [ens-verified added?]
+         :as   contact} (when-not group-chat
                           (rf/sub [:contacts/contact-by-address chat-id]))
         unread-messages? (pos? unviewed-messages-count)]
     [rn/view {:style {:flex-direction :row}}
@@ -282,7 +283,8 @@
 
 (defn chat-list-item
   [{:keys [chat-id chat-type]
-    :as   item} theme]
+    :as   item}
+   theme]
   (let [customization-color (rf/sub [:profile/customization-color])]
     [rn/touchable-highlight
      {:style          style/container

src/status_im/contexts/chat/home/view.cljs

@@ -5,6 +5,7 @@
    [re-frame.core :as re-frame]
    [react-native.core :as rn]
    [react-native.reanimated :as reanimated]
+   [reagent.core :as reagent]
    [status-im.common.contact-list-item.view :as contact-list-item]
    [status-im.common.contact-list.view :as contact-list]
    [status-im.common.home.actions.view :as actions]
@@ -45,10 +46,21 @@
          :description (i18n/label :t/no-messages-description)
          :image       (resources/get-themed-image :cat-in-box theme)}})
 
+(defn external-component [item]
+  ;; TODO: Since this avoids the blinking, we need to check what else is wrong in other usages
+  (let [theme (quo.theme/use-theme)]
+    (def --item item)
+    (chat-list-item/chat-list-item item theme)))
+
 (defn chats
   [{:keys [theme selected-tab set-scroll-ref scroll-shared-value]}]
-  (let [unfiltered-items (rf/sub [:chats/chats-stack-items])
+  (let [items* (reagent/atom (filter-and-sort-items-by-tab selected-tab (rf/sub [:chats/chats-stack-items])))
-        items            (filter-and-sort-items-by-tab selected-tab unfiltered-items)]
+        _      (def --i items*)]
+
+    (fn [{:keys [theme selected-tab set-scroll-ref scroll-shared-value]}]
+      (let [;;unfiltered-items (rf/sub [:chats/chats-stack-items])
+            ;;_                (reset! items* (filter-and-sort-items-by-tab selected-tab unfiltered-items))
+            items @items*]
         (if (empty? items)
           [common.empty-state/view
            {:selected-tab selected-tab
@@ -62,7 +74,7 @@
             :on-end-reached                    #(re-frame/dispatch [:chat/show-more-chats])
             :keyboard-should-persist-taps      :always
             :data                              items
-        :render-fn                         (fn [item]
+            :render-fn                         external-component #_(fn [item]
                                                  (chat-list-item/chat-list-item item theme))
             :scroll-event-throttle             8
             :content-container-style           {:padding-bottom
@@ -70,7 +82,7 @@
                                                 :padding-top 8}
             :on-scroll                         #(common.banner/set-scroll-shared-value
                                                  {:scroll-input (oops/oget % "nativeEvent.contentOffset.y")
-                                              :shared-value scroll-shared-value})}])))
+                                                  :shared-value scroll-shared-value})}])))))
 
 (defn contact-item-render
   [{:keys [public-key] :as item} theme]