From e5e69149478d48238e9efbef36819aaf16112ab1 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Fri, 4 Mar 2022 11:05:46 -0500
Subject: [PATCH] refactor(ChatColumnView): put ChatContentViews in Loaders

This makes the initial loading of the app faster as well as reducing the memory usage until the user clicks on a channel
---
 .../AppLayouts/Chat/views/ChatColumnView.qml  | 97 +++++++++++++------
 1 file changed, 69 insertions(+), 28 deletions(-)

diff --git a/ui/app/AppLayouts/Chat/views/ChatColumnView.qml b/ui/app/AppLayouts/Chat/views/ChatColumnView.qml
index e0393ca713..d8fe2ee6ca 100644
--- a/ui/app/AppLayouts/Chat/views/ChatColumnView.qml
+++ b/ui/app/AppLayouts/Chat/views/ChatColumnView.qml
@@ -135,12 +135,11 @@ Item {
         model: parentModule && parentModule.model
         delegate: delegateChooser
 
-        function isChatActive(chatContentModule, activeChatId, activeSubItemId, isSectionActive) {
-            if(!chatContentModule || !isSectionActive)
+        function isChatActive(myChatId) {
+            if(!myChatId || !root.isSectionActive)
                 return false
 
-            let myChatId = chatContentModule.getMyChatId()
-            if(myChatId === activeChatId || myChatId === activeSubItemId)
+            if(myChatId === root.activeChatId || myChatId === root.activeSubItemId)
                 return true
 
             return false
@@ -158,12 +157,73 @@ Item {
                         }
                         return subItems
                     }
-                    delegate: ChatContentView {
+                    delegate: Loader {
+                        property bool isActiveChannel: chatRepeater.isChatActive(model.itemId)
+
+                        id: categoryChatLoader
+                        // Channels are not loaded by default and only load when first put active
+                        active: false
                         width: parent.width
-                        clip: true
-                        // dynamically calculate the height of the view, if the active one is the current one
-                        // then set the height to parent otherwise set it to 0
                         height: isActiveChannel ? parent.height : 0
+
+                        Connections {
+                            id: loaderConnections
+                            target: categoryChatLoader
+                            // First time this channel turns active, activate the Loader
+                            onIsActiveChannelChanged: {
+                                if (chatLoader.isActiveChannel) {
+                                    categoryChatLoader.active = true
+                                    loaderConnections.enabled = false
+                                }
+                            }
+                        }
+
+                        sourceComponent: ChatContentView {
+                            width: parent.width
+                            height: parent.height
+                            clip: true
+                            rootStore: root.rootStore
+                            contactsStore: root.contactsStore
+                            sendTransactionNoEnsModal: cmpSendTransactionNoEns
+                            receiveTransactionModal: cmpReceiveTransaction
+                            sendTransactionWithEnsModal: cmpSendTransactionWithEns
+                            stickersLoaded: root.stickersLoaded
+                            isBlocked: model.blocked
+                            isActiveChannel: categoryChatLoader.isActiveChannel
+                            Component.onCompleted: {
+                                parentModule.prepareChatContentModuleForChatId(model.itemId)
+                                chatContentModule = parentModule.getChatContentModule()
+                            }
+                        }
+                    }
+                }
+            }
+            DelegateChoice { // In all other cases
+                delegate: Loader {
+                    property bool isActiveChannel: chatRepeater.isChatActive(model.itemId)
+
+                    id: chatLoader
+                    // Channels are not loaded by default and only load when first put active
+                    active: false
+                    width: parent.width
+                    height: isActiveChannel ? parent.height : 0
+
+                    Connections {
+                        id: loaderConnections
+                        target: chatLoader
+                        // First time this channel turns active, activate the Loader
+                        onIsActiveChannelChanged: {
+                            if (chatLoader.isActiveChannel) {
+                                chatLoader.active = true
+                                loaderConnections.enabled = false
+                            }
+                        }
+                    }
+
+                    sourceComponent: ChatContentView {
+                        width: parent.width
+                        height: parent.height
+                        clip: true
                         rootStore: root.rootStore
                         contactsStore: root.contactsStore
                         sendTransactionNoEnsModal: cmpSendTransactionNoEns
@@ -171,7 +231,7 @@ Item {
                         sendTransactionWithEnsModal: cmpSendTransactionWithEns
                         stickersLoaded: root.stickersLoaded
                         isBlocked: model.blocked
-                        isActiveChannel: chatRepeater.isChatActive(chatContentModule, root.activeChatId, root.activeSubItemId, root.isSectionActive)
+                        isActiveChannel: chatLoader.isActiveChannel
                         Component.onCompleted: {
                             parentModule.prepareChatContentModuleForChatId(model.itemId)
                             chatContentModule = parentModule.getChatContentModule()
@@ -179,25 +239,6 @@ Item {
                     }
                 }
             }
-            DelegateChoice { // In all other cases
-                delegate: ChatContentView {
-                    width: parent.width
-                    clip: true
-                    height: isActiveChannel ? parent.height : 0
-                    rootStore: root.rootStore
-                    contactsStore: root.contactsStore
-                    sendTransactionNoEnsModal: cmpSendTransactionNoEns
-                    receiveTransactionModal: cmpReceiveTransaction
-                    sendTransactionWithEnsModal: cmpSendTransactionWithEns
-                    stickersLoaded: root.stickersLoaded
-                    isBlocked: model.blocked
-                    isActiveChannel: chatRepeater.isChatActive(chatContentModule, root.activeChatId, root.activeSubItemId, root.isSectionActive)
-                    Component.onCompleted: {
-                        parentModule.prepareChatContentModuleForChatId(itemId)
-                        chatContentModule = parentModule.getChatContentModule()
-                    }
-                }
-            }
         }
     }