From e5e69149478d48238e9efbef36819aaf16112ab1 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville 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() - } - } - } } }