fix(@desktop/wallet): Speedup wallet view loading (#11736)

fixes #11627

src/app/modules/shared_models/collectibles_model.nim

@@ -216,3 +216,15 @@ QtObject:
 
     if self.isFetching:
       self.appendLoadingItems()
+
+  proc getImageUrl*(self: Model, id: string): string {.slot.} =
+    for item in self.items:
+      if(cmpIgnoreCase(item.getId(), id) == 0):
+        return item.getImageUrl()
+    return ""
+
+  proc getName*(self: Model, id: string): string {.slot.} =
+    for item in self.items:
+      if(cmpIgnoreCase(item.getId(), id) == 0):
+        return item.getName()
+    return ""

ui/app/AppLayouts/Wallet/panels/ActivityFilterPanel.qml

@@ -141,42 +141,39 @@ Column {
         }
 
         Repeater {
-            model: activityFilterStore.tokensList
+            model: activityFilterStore.tokensFilter
             delegate: ActivityFilterTagItem {
-                tagPrimaryLabel.text: symbol
+                tagPrimaryLabel.text: modelData
-                iconAsset.icon: Constants.tokenIcon(symbol)
+                iconAsset.icon: Constants.tokenIcon(modelData)
                 iconAsset.color: "transparent"
-                visible: !activityFilterMenu.allTokensChecked && activityFilterStore.tokensFilter.includes(symbol)
+                onClosed: activityFilterStore.toggleToken(modelData)
-                onClosed: activityFilterStore.toggleToken(symbol)
             }
         }
 
         Repeater {
-            model: activityFilterStore.collectiblesList
+            model: activityFilterStore.collectiblesFilter
             delegate: ActivityFilterTagItem {
-                tagPrimaryLabel.text: model.name
+                tagPrimaryLabel.text: activityFilterStore.collectiblesList.getName(modelData)
-                iconAsset.icon: model.imageUrl
+                iconAsset.icon: activityFilterStore.collectiblesList.getImageUrl(modelData)
                 iconAsset.color: "transparent"
-                visible: !activityFilterMenu.allCollectiblesChecked && activityFilterStore.collectiblesFilter.includes(model.id)
                 onClosed: activityFilterStore.toggleCollectibles(model.id)
             }
         }
 
         Repeater {
-            model: activityFilterStore.recentsList
+            model: activityFilterStore.recentsFilters
             delegate: ActivityFilterTagItem {
-                tagPrimaryLabel.text: root.store.getNameForAddress(model.address) || StatusQUtils.Utils.elideText(model.address,6,4)
+                tagPrimaryLabel.text: root.store.getNameForAddress(modelData) || StatusQUtils.Utils.elideText(modelData,6,4)
-                visible: !activityFilterMenu.allRecentsChecked && activityFilterMenu.recentsFilters.includes(model.address)
+                onClosed: activityFilterStore.toggleRecents(modelData)
-                onClosed: activityFilterStore.toggleRecents(model.address)
             }
         }
 
         Repeater {
-            model: activityFilterStore.savedAddressList
+            model: activityFilterStore.savedAddressFilters
             delegate: ActivityFilterTagItem {
-                tagPrimaryLabel.text: ens.length > 0 ? ens : chainShortNames + StatusQUtils.Utils.elideText(address,6,4)
+                tagPrimaryLabel.text: activityFilterStore.getEnsForSavedWalletAddress(modelData)
-                visible: !activityFilterMenu.allSavedAddressesChecked && activityFilterMenu.savedAddressFilters.includes(address)
+                                      || activityFilterStore.getChainShortNamesForSavedWalletAddress(modelData) + StatusQUtils.Utils.elideText(modelData,6,4)
-                onClosed: activityFilterStore.toggleSavedAddress(address)
+                onClosed: activityFilterStore.toggleSavedAddress(modelData)
             }
         }
     }

ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityCounterpartyFilterSubMenu.qml

@@ -93,6 +93,7 @@ StatusMenu {
                 width: parent.width
                 height: root.height - tabBar.height - 12
                 model: root.recentsList
+                reuseItems: true
                 delegate: ActivityTypeCheckBox {
                     readonly property string name: store.getNameForAddress(model.address)
                     width: ListView.view.width

ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityTokensFilterSubMenu.qml

@@ -146,6 +146,7 @@ StatusMenu {
                 width: parent.width
                 height: root.height - tabBar.height - tokensSearchBox.height - 12
                 spacing: 0
+                reuseItems: true
                 model: SortFilterProxyModel {
                     sourceModel: root.collectiblesList
                     filters: ExpressionFilter {

ui/app/AppLayouts/Wallet/stores/ActivityFiltersStore.qml

@@ -213,7 +213,15 @@ QtObject {
         activityController.updateFilter()
     }
 
-    property var savedAddressesModel: walletSectionSavedAddresses.model
+    function getChainShortNamesForSavedWalletAddress(address) {
+        return walletSectionSavedAddresses.getChainShortNamesForAddress(address)
+    }
+
+    function getEnsForSavedWalletAddress(address) {
+        return walletSectionSavedAddresses.getEnsForAddress(address)
+    }
+
+    readonly property var savedAddressesModel: walletSectionSavedAddresses.model
     property bool areTestNetworksEnabled: networksModule.areTestNetworksEnabled
     property var savedAddressList:  SortFilterProxyModel {
         sourceModel: savedAddressesModel

ui/app/AppLayouts/Wallet/views/LeftTabView.qml

@@ -59,6 +59,15 @@ Rectangle {
 
     color: Style.current.secondaryMenuBackground
 
+    Component.onCompleted: {
+        d.loaded = true
+    }
+
+    QtObject {
+        id: d
+        property bool loaded: false
+    }
+
     Loader {
         id: addAccount
         active: false
@@ -245,7 +254,7 @@ Rectangle {
                 bottomMargin: Style.current.padding
 
                 readonly property Item firstItem: count > 0 ? itemAtIndex(0) : null
-                readonly property bool footerOverlayed: contentHeight > availableHeight
+                readonly property bool footerOverlayed: d.loaded && contentHeight > availableHeight
 
                 delegate: StatusListItem {
                     objectName: "walletAccount-" + model.name

ui/imports/shared/controls/TokenDelegate.qml

@@ -33,9 +33,11 @@ StatusListItem {
     property string errorTooltipText_1
     property string errorTooltipText_2
 
+    readonly property string symbolUrl: !!modelData && modelData.symbol ? Constants.tokenIcon(modelData.symbol, false) : ""
+
     title: modelData ? modelData.name : ""
     subTitle: LocaleUtils.currencyAmountToLocaleString(modelData.enabledNetworkBalance)
-    asset.name: modelData && modelData.symbol ? Style.png("tokens/" + modelData.symbol) : ""
+    asset.name: symbolUrl
     asset.isImage: true
     errorIcon.tooltip.maxWidth: 300
 
@@ -97,4 +99,18 @@ StatusListItem {
             }
         }
     ]
+
+    states: [
+        State {
+            name: "unkownToken"
+            when: !root.symbolUrl
+            PropertyChanges {
+                target: root.asset
+                isLetterIdenticon: true
+                color: Theme.palette.miscColor5
+                name: !!modelData && modelData.symbol ? modelData.symbol : ""
+            }
+        }
+
+    ]
 }

ui/imports/shared/views/AssetsView.qml

@@ -34,6 +34,7 @@ Item {
         objectName: "assetViewStatusListView"
         anchors.fill: parent
         model: filteredModel
+        reuseItems: true
         delegate: delegateLoader
     }
 
@@ -49,7 +50,7 @@ Item {
 
     Component {
         id: delegateLoader
-        Loader {
+         Loader {
             property var modelData: model
             property int index: index
             width: ListView.view.width

ui/imports/shared/views/HistoryView.qml

@@ -32,7 +32,11 @@ ColumnLayout {
     signal launchTransactionDetail(var transaction)
 
     onVisibleChanged: {
-        if (visible && RootStore.transactionActivityStatus.isFilterDirty) {
+        if (!visible)
+            return
+
+        filterPanelLoader.active = true
+        if (RootStore.transactionActivityStatus.isFilterDirty) {
             WalletStores.RootStore.currentActivityFiltersStore.applyAllFilters()
         }
     }
@@ -80,13 +84,17 @@ ColumnLayout {
         text: qsTr("Activity for this account will appear here")
     }
 
-    ActivityFilterPanel {
+    Loader {
-        id: filterComponent
+        id: filterPanelLoader
-        visible: d.isInitialLoading || transactionListRoot.count > 0 || WalletStores.RootStore.currentActivityFiltersStore.filtersSet
+        active: false
+        asynchronous: true
         Layout.fillWidth: true
-        activityFilterStore: WalletStores.RootStore.currentActivityFiltersStore
+        sourceComponent: ActivityFilterPanel {
-        store: WalletStores.RootStore
+            visible: d.isInitialLoading || transactionListRoot.count > 0 || WalletStores.RootStore.currentActivityFiltersStore.filtersSet
-        isLoading: d.isInitialLoading
+            activityFilterStore: WalletStores.RootStore.currentActivityFiltersStore
+            store: WalletStores.RootStore
+            isLoading: d.isInitialLoading
+        }
     }
 
     Item {
@@ -380,6 +388,8 @@ ColumnLayout {
 
             Repeater {
                 model: {
+                    if (!root.visible)
+                        return 0
                     if (!noTxs.visible) {
                         const delegateHeight = 64 + footerColumn.spacing
                         if (d.isInitialLoading) {

ui/imports/utils/Constants.qml

@@ -1058,11 +1058,13 @@ QtObject {
         "GRID", "LISK", "MOD", "PAX", "RAE", "SAI", "ST", "TNT", "WABI"
     ]
 
-    function tokenIcon(symbol) {
+    function tokenIcon(symbol, useDefault=true) {
         if (!!symbol && knownTokenPNGs.indexOf(symbol) !== -1)
             return Style.png("tokens/" + symbol)
 
-        return Style.png("tokens/DEFAULT-TOKEN")
+        if (useDefault)
+            return Style.png("tokens/DEFAULT-TOKEN")
+        return ""
     }
 
     // Message outgoing status