feat(@desktop/wallet): Loading animation for input data decoding (#11378)

closes #11333

Makefile

@@ -146,9 +146,11 @@ QML_DEBUG ?= false
 QML_DEBUG_PORT ?= 49152
 
 ifneq ($(QML_DEBUG), false)
+ STATUSQ_BUILD_TYPE=Debug
  DOTHERSIDE_CMAKE_PARAMS := -DCMAKE_BUILD_TYPE=Debug -DQML_DEBUG_PORT=$(QML_DEBUG_PORT)
  DOTHERSIDE_BUILD_CMD := cmake --build . --config Debug
 else
+ STATUSQ_BUILD_TYPE=Release
  DOTHERSIDE_CMAKE_PARAMS := -DCMAKE_BUILD_TYPE=Release
  DOTHERSIDE_BUILD_CMD := cmake --build . --config Release
 endif
@@ -259,7 +261,7 @@ STATUSQ_CMAKE_CACHE := $(STATUSQ_BUILD_PATH)/CMakeCache.txt
 $(STATUSQ_CMAKE_CACHE): | deps
 	echo -e "\033[92mConfiguring:\033[39m StatusQ"
 	cmake -DCMAKE_INSTALL_PREFIX=$(STATUSQ_INSTALL_PATH) \
-		-DCMAKE_BUILD_TYPE=Release \
+		-DCMAKE_BUILD_TYPE=$(STATUSQ_BUILD_TYPE) \
 		-DSTATUSQ_BUILD_SANDBOX=OFF \
 		-DSTATUSQ_BUILD_SANITY_CHECKER=OFF \
 		-DSTATUSQ_BUILD_TESTS=OFF \
@@ -275,7 +277,7 @@ statusq-build: | statusq-configure
 	echo -e "\033[92mBuilding:\033[39m StatusQ"
 	cmake --build $(STATUSQ_BUILD_PATH) \
 		--target StatusQ \
-		--config Release \
+		--config $(STATUSQ_BUILD_TYPE) \
 		$(HANDLE_OUTPUT)
 
 statusq-install: | statusq-build

ui/StatusQ/src/StatusQ/Components/StatusListItem.qml

@@ -86,6 +86,8 @@ Rectangle {
     property alias errorIcon: errorIcon
     property alias statusListItemTagsRowLayout: statusListItemSubtitleTagsRow
 
+    property int subTitleBadgeLoaderAlignment: Qt.AlignVCenter
+
     signal clicked(string itemId, var mouse)
     signal titleClicked(string titleId)
     signal iconClicked(var mouse)
@@ -279,7 +281,7 @@ Rectangle {
 
                 Loader {
                     id: subTitleBadgeLoader
-                    Layout.alignment: Qt.AlignVCenter
+                    Layout.alignment: root.subTitleBadgeLoaderAlignment
                     visible: sourceComponent
                 }
 

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

@@ -34,6 +34,7 @@ Item {
         d.decodedInputData = ""
         if (!transaction || !transaction.input || !RootStore.history)
             return
+        d.loadingInputDate = true
         RootStore.history.fetchDecodedTxData(transaction.txHash, transaction.input)
     }
 
@@ -60,6 +61,7 @@ Item {
         readonly property string toNetworkName: "" // TODO fill network name for bridge
 
         property string decodedInputData: ""
+        property bool loadingInputDate: false
 
         function getNameForSavedWalletAddress(address) {
             return RootStore.getNameForSavedWalletAddress(address)
@@ -73,8 +75,13 @@ Item {
     Connections {
         target: RootStore.history
         function onTxDecoded(txHash: string, dataDecoded: string) {
-            if (!root.isTransactionValid || txHash !== root.transaction.txHash || !dataDecoded)
+            if (!root.isTransactionValid || txHash !== root.transaction.txHash)
                 return
+            if (!dataDecoded) {
+                d.loadingInputDate = false
+                return
+            }
+
             try {
                 const decodedObject = JSON.parse(dataDecoded)
                 let text = qsTr("Function: %1").arg(decodedObject.signature)
@@ -86,6 +93,7 @@ Item {
             } catch(e) {
                 console.error("Failed to parse decoded tx data. Data:", dataDecoded)
             }
+            d.loadingInputDate = false
         }
     }
 
@@ -339,7 +347,7 @@ Item {
                     width: progressBlock.width
                     RowLayout {
                         width: parent.width
-                        height: Math.max(implicitHeight, 85)
+                        height: networkNameTile.statusListItemSubTitle.lineCount > 1 ? 85 : 70
                         spacing: 0
                         TransactionDataTile {
                             id: multichainNetworksTile
@@ -370,11 +378,13 @@ Item {
                             }
                         }
                         TransactionDataTile {
+                            id: networkNameTile
                             Layout.fillHeight: true
                             Layout.fillWidth: true
                             title: qsTr("Network")
                             subTitle: transactionHeader.networkName
-                            asset.name: !!d.networkIcon ? Style.svg("%1".arg(d.networkIcon)) : ""
+                            asset.name: !!d.networkIcon ? Style.svg(d.networkIcon) : ""
+                            subTitleBadgeLoaderAlignment: Qt.AlignTop
                             smallIcon: true
                             visible: d.transactionType !== Constants.TransactionType.Bridge
                         }
@@ -394,23 +404,24 @@ Item {
                         }
                     }
                     TransactionDataTile {
-                        id: inputDataTile
                         width: parent.width
-                        height: Math.min(implicitHeight + bottomPadding, 112)
+                        height: d.loadingInputDate ? 112 : Math.min(implicitHeight + bottomPadding, 112)
                         title: qsTr("Input data")
+                        // Input string can be really long. Getting substring just for 3+ lines to speedup formatting.
                         subTitle: {
-                            if (!!d.decodedInputData) {
+                            if (d.loadingInputDate) {
-                                return d.decodedInputData
+                                return ""
+                            } else if (!!d.decodedInputData) {
+                                return d.decodedInputData.substring(0, 100)
                             } else if (root.isTransactionValid) {
-                                return root.transaction.input
+                                return String(root.transaction.input).substring(0, 100)
                             }
                             return ""
                         }
-                        visible: !!subTitle
+                        visible: !!subTitle || d.loadingInputDate
-                        buttonIconName: "more"
+                        buttonIconName: d.loadingInputDate ? "" : "more"
                         statusListItemSubTitle.maximumLineCount: 4
                         statusListItemSubTitle.lineHeight: 1.21
-                        onButtonClicked: addressMenu.openInputDataMenu(this, subTitle)
                         statusListItemSubTitle.layer.enabled: statusListItemSubTitle.lineCount > 3
                         statusListItemSubTitle.layer.effect: OpacityMask {
                             maskSource: Rectangle {
@@ -423,6 +434,35 @@ Item {
                                 }
                             }
                         }
+                        tertiaryTitle: !d.loadingInputDate && !d.decodedInputData ? qsTr("Data could not be decoded") : ""
+                        statusListItemTertiaryTitle.anchors.baseline: statusListItemTitle.baseline
+                        statusListItemTertiaryTitle.font: statusListItemTitle.font
+                        onButtonClicked: addressMenu.openInputDataMenu(this, !!d.decodedInputData ? d.decodedInputData : root.transaction.input)
+
+                        Loader {
+                            anchors {
+                                left: parent.left
+                                bottom: parent.bottom
+                                right: parent.right
+                                margins: 12
+                            }
+                            active: d.loadingInputDate
+                            sourceComponent: Column {
+                                spacing: 10
+                                Repeater {
+                                    model: 3
+                                    LoadingComponent {
+                                        anchors {
+                                            left: parent.left
+                                            right: index === 2 ? parent.horizontalCenter : parent.right
+                                        }
+                                        height: 11
+                                        radius: 4
+                                        enabled: false
+                                    }
+                                }
+                            }
+                        }
                     }
                     TransactionDataTile {
                         width: parent.width

ui/imports/shared/controls/TransactionDataTile.qml

@@ -89,6 +89,7 @@ StatusListItem {
     statusListItemTagsRowLayout.spacing: 8
     subTitleBadgeComponent: !!asset.name ? iconComponent : null
     statusListItemIcon.asset: StatusAssetSettings {}
+    statusListItemIcon.name: ""
 
     Component {
         id: iconComponent