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

ui/app/AppLayouts/Chat/views/ChatColumnView.qml

@@ -135,12 +135,11 @@ Item {
         model: parentModule && parentModule.model
         delegate: delegateChooser
 
-        function isChatActive(chatContentModule, activeChatId, activeSubItemId, isSectionActive) {
+        function isChatActive(myChatId) {
-            if(!chatContentModule || !isSectionActive)
+            if(!myChatId || !root.isSectionActive)
                 return false
 
-            let myChatId = chatContentModule.getMyChatId()
+            if(myChatId === root.activeChatId || myChatId === root.activeSubItemId)
-            if(myChatId === activeChatId || myChatId === activeSubItemId)
                 return true
 
             return false
@@ -158,12 +157,31 @@ 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
@@ -171,7 +189,7 @@ Item {
                             sendTransactionWithEnsModal: cmpSendTransactionWithEns
                             stickersLoaded: root.stickersLoaded
                             isBlocked: model.blocked
-                        isActiveChannel: chatRepeater.isChatActive(chatContentModule, root.activeChatId, root.activeSubItemId, root.isSectionActive)
+                            isActiveChannel: categoryChatLoader.isActiveChannel
                             Component.onCompleted: {
                                 parentModule.prepareChatContentModuleForChatId(model.itemId)
                                 chatContentModule = parentModule.getChatContentModule()
@@ -179,11 +197,33 @@ Item {
                         }
                     }
                 }
+            }
             DelegateChoice { // In all other cases
-                delegate: ChatContentView {
+                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
-                    clip: true
                     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
@@ -191,15 +231,16 @@ 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(itemId)
+                            parentModule.prepareChatContentModuleForChatId(model.itemId)
                             chatContentModule = parentModule.getChatContentModule()
                         }
                     }
                 }
             }
         }
+    }
 
     ChatRequestMessagePanel {
         Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom