chore(ProfileLayout): improve startup time / memory usage

- replace StackLayout with Loaders, activate them lazily and never unload
when staying inside the Settings sections
- drop some imperative code
- faster startup, subsection load times and quick switching between subsections

Fixes #8781
This commit is contained in:
Lukáš Tinkl 2022-12-14 14:59:14 +01:00 committed by Lukáš Tinkl
parent 50b5442818
commit abc3e9a33c
1 changed files with 107 additions and 54 deletions

View File

@ -26,23 +26,27 @@ StatusSectionLayout {
onNotificationButtonClicked: Global.openActivityCenterPopup()
onBackButtonClicked: {
switch (profileContainer.currentIndex) {
switch (Global.settingsSubsection) {
case Constants.settingsSubsection.contacts:
Global.changeAppSectionBySectionType(Constants.appSection.profile, Constants.settingsSubsection.messaging)
break;
case Constants.settingsSubsection.wallet:
walletView.resetStack();
walletView.item.resetStack()
break;
case Constants.settingsSubsection.keycard:
keycardView.handleBackAction();
keycardView.item.handleBackAction()
break;
}
}
Component.onCompleted: {
profileContainer.currentIndex = -1
profileContainer.currentIndex = Qt.binding(() => Global.settingsSubsection)
}
QtObject {
id: d
readonly property int topMargin: 0
readonly property int bottomMargin: 56
readonly property int leftMargin: 64
readonly property int rightMargin: 64
@ -51,10 +55,8 @@ StatusSectionLayout {
}
leftPanel: LeftTabView {
id: leftTab
store: root.store
anchors.fill: parent
anchors.topMargin: d.topMargin
onMenuItemClicked: {
if (profileContainer.currentItem.dirty) {
event.accepted = true;
@ -63,18 +65,12 @@ StatusSectionLayout {
}
}
centerPanel: Item {
anchors.fill: parent
StackLayout {
centerPanel: StackLayout {
id: profileContainer
readonly property var currentItem: (currentIndex >= 0 && currentIndex < children.length) ? children[currentIndex] : null
readonly property var currentItem: (currentIndex >= 0 && currentIndex < children.length) ? children[currentIndex].item : null
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.fill: parent
anchors.bottomMargin: d.bottomMargin
anchors.leftMargin: d.leftMargin
anchors.rightMargin: d.rightMargin
@ -82,21 +78,26 @@ StatusSectionLayout {
currentIndex: Global.settingsSubsection
onCurrentIndexChanged: {
if(visibleChildren[0] === ensContainer){
ensContainer.goToStart();
}
if (currentIndex === 1) {
root.store.backButtonName = root.store.getNameForSubsection(Constants.settingsSubsection.messaging);
}
else if (currentIndex === Constants.settingsSubsection.keycard) {
keycardView.handleBackAction();
}
else {
root.store.backButtonName = "";
if (!children[currentIndex].active)
children[currentIndex].active = true
root.store.backButtonName = ""
if (currentIndex === Constants.settingsSubsection.ensUsernames) {
ensContainer.item.goToStart()
} else if (currentIndex === Constants.settingsSubsection.contacts) {
root.store.backButtonName = root.store.getNameForSubsection(Constants.settingsSubsection.messaging)
} else if (currentIndex === Constants.settingsSubsection.wallet) {
walletView.item.resetStack()
} else if (currentIndex === Constants.settingsSubsection.keycard) {
keycardView.item.handleBackAction()
}
}
MyProfileView {
Loader {
active: false
asynchronous: true
sourceComponent: MyProfileView {
implicitWidth: parent.width
implicitHeight: parent.height
@ -107,31 +108,43 @@ StatusSectionLayout {
sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.profile)
contentWidth: d.contentWidth
}
}
ContactsView {
Loader {
active: false
asynchronous: true
sourceComponent: ContactsView {
implicitWidth: parent.width
implicitHeight: parent.height
contactsStore: root.store.contactsStore
sectionTitle: qsTr("Contacts")
contentWidth: d.contentWidth
}
}
EnsView {
Loader {
id: ensContainer
active: false
asynchronous: true
sourceComponent: EnsView {
// TODO: we need to align structure for the entire this part using `SettingsContentBase` as root component
// TODO: handle structure for this subsection to match style used in onther sections
// using `SettingsContentBase` component as base.
id: ensContainer
implicitWidth: parent.width
implicitHeight: parent.height
ensUsernamesStore: root.store.ensUsernamesStore
contactsStore: root.store.contactsStore
stickersStore: root.store.stickersStore
profileContentWidth: d.contentWidth
}
}
MessagingView {
Loader {
active: false
asynchronous: true
sourceComponent: MessagingView {
implicitWidth: parent.width
implicitHeight: parent.height
advancedStore: root.store.advancedStore
@ -140,9 +153,13 @@ StatusSectionLayout {
contactsStore: root.store.contactsStore
contentWidth: d.contentWidth
}
}
WalletView {
Loader {
id: walletView
active: false
asynchronous: true
sourceComponent: WalletView {
implicitWidth: parent.width
implicitHeight: parent.height
rootStore: root.store
@ -151,8 +168,13 @@ StatusSectionLayout {
sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.wallet)
contentWidth: d.contentWidth
}
onLoaded: root.store.backButtonName = ""
}
AppearanceView {
Loader {
active: false
asynchronous: true
sourceComponent: AppearanceView {
implicitWidth: parent.width
implicitHeight: parent.height
@ -161,8 +183,12 @@ StatusSectionLayout {
contentWidth: d.contentWidth
systemPalette: root.systemPalette
}
}
LanguageView {
Loader {
active: false
asynchronous: true
sourceComponent: LanguageView {
implicitWidth: parent.width
implicitHeight: parent.height
@ -171,8 +197,12 @@ StatusSectionLayout {
sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.language)
contentWidth: d.contentWidth
}
}
NotificationsView {
Loader {
active: false
asynchronous: true
sourceComponent: NotificationsView {
implicitWidth: parent.width
implicitHeight: parent.height
@ -181,8 +211,12 @@ StatusSectionLayout {
sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.notifications)
contentWidth: d.contentWidth
}
}
DevicesView {
Loader {
active: false
asynchronous: true
sourceComponent: DevicesView {
implicitWidth: parent.width
implicitHeight: parent.height
@ -190,8 +224,12 @@ StatusSectionLayout {
sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.devicesSettings)
contentWidth: d.contentWidth
}
}
BrowserView {
Loader {
active: false
asynchronous: true
sourceComponent: BrowserView {
implicitWidth: parent.width
implicitHeight: parent.height
@ -200,8 +238,12 @@ StatusSectionLayout {
sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.browserSettings)
contentWidth: d.contentWidth
}
}
AdvancedView {
Loader {
active: false
asynchronous: true
sourceComponent: AdvancedView {
implicitWidth: parent.width
implicitHeight: parent.height
@ -209,8 +251,12 @@ StatusSectionLayout {
sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.advanced)
contentWidth: d.contentWidth
}
}
AboutView {
Loader {
active: false
asynchronous: true
sourceComponent: AboutView {
implicitWidth: parent.width
implicitHeight: parent.height
sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.about)
@ -234,8 +280,12 @@ StatusSectionLayout {
}
}
}
}
CommunitiesView {
Loader {
active: false
asynchronous: true
sourceComponent: CommunitiesView {
implicitWidth: parent.width
implicitHeight: parent.height
@ -245,9 +295,13 @@ StatusSectionLayout {
sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.communitiesSettings)
contentWidth: d.contentWidth
}
}
KeycardView {
Loader {
id: keycardView
active: false
asynchronous: true
sourceComponent: KeycardView {
implicitWidth: parent.width
implicitHeight: parent.height
@ -259,6 +313,5 @@ StatusSectionLayout {
contentWidth: d.contentWidth
}
}
} // Item
} // StatusAppTwoPanelLayout
}
}