feat(Communities): Add animation in token holders list when remotely destuct completed

Closes: #11775

storybook/pages/SortableTokenHoldersListPage.qml

@@ -1,11 +1,14 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 
 import AppLayouts.Communities.panels 1.0
 
 import Storybook 1.0
 import Models 1.0
 
+import utils 1.0
+
 SplitView {
     id: root
 
@@ -46,6 +49,32 @@ SplitView {
         SplitView.preferredHeight: 200
 
         logsView.logText: logs.logText
+
+        RowLayout {
+            Button {
+                text: "Set all remotely burn to completed"
+
+                onClicked: {
+                    for (let i = 0; i < tokenHoldersModel.count; i++) {
+                        tokenHoldersModel.setProperty(
+                                    i, "remotelyDestructState",
+                                    Constants.ContractTransactionStatus.Completed)
+                    }
+                }
+            }
+
+            Button {
+                text: "Set all remotely burn to in progress"
+
+                onClicked: {
+                    for (let i = 0; i < tokenHoldersModel.count; i++) {
+                        tokenHoldersModel.setProperty(
+                                    i, "remotelyDestructState",
+                                    Constants.ContractTransactionStatus.InProgress)
+                    }
+                }
+            }
+        }
     }
 }
 

ui/app/AppLayouts/Communities/panels/SortableTokenHoldersList.qml

@@ -161,6 +161,14 @@ StatusListView {
     delegate: ItemDelegate {
         id: delegate
 
+        readonly property bool remotelyDestructInProgress:
+            model.remotelyDestructState === Constants.ContractTransactionStatus.InProgress
+
+        onRemotelyDestructInProgressChanged: {
+            if(!remotelyDestructInProgress)
+                colorAnimation.restart()
+        }
+
         padding: 0
         horizontalPadding: Style.current.padding
 
@@ -184,7 +192,6 @@ StatusListView {
         background: Item {
             Rectangle {
                 anchors.fill: parent
-
                 anchors.topMargin: delegate.topPadding
 
                 radius: Style.current.radius
@@ -192,6 +199,24 @@ StatusListView {
                        ? Theme.palette.baseColor2 : "transparent"
             }
 
+            Rectangle {
+                anchors.fill: parent
+                anchors.topMargin: delegate.topPadding
+
+                radius: Style.current.radius
+                color: "transparent"
+
+                SequentialAnimation on color {
+                    id: colorAnimation
+
+                    running: false
+
+                    PropertyAction { value: Theme.palette.primaryColor3 }
+                    PauseAnimation { duration: 1000 }
+                    ColorAnimation { to: "transparent"; duration: 500 }
+                }
+            }
+
             Rectangle {
                 visible: delegate.showSeparator
 
@@ -205,14 +230,9 @@ StatusListView {
         }
 
         contentItem: Item {
-            id: delegateRoot
-
             implicitWidth: delegateRow.implicitWidth
             implicitHeight: delegateRow.implicitHeight
 
-            readonly property bool remotelyDestructInProgress:
-                model.remotelyDestructState === Constants.ContractTransactionStatus.InProgress
-
             RowLayout {
                 id: delegateRow
 
@@ -261,7 +281,6 @@ StatusListView {
                 }
 
                 RowLayout {
-
                     Layout.preferredWidth: root.headerItem.holdingHeaderWidth
                     spacing: 4
 
@@ -271,7 +290,7 @@ StatusListView {
 
                         text: StatusQUtils.Emoji.fromCodePoint("1f525") // :fire: emoji
                         font.pixelSize: Style.current.tertiaryTextFontSize
-                        visible: delegateRoot.remotelyDestructInProgress
+                        visible: delegate.remotelyDestructInProgress
                         color: Theme.palette.directColor1
                     }
 
@@ -284,7 +303,7 @@ StatusListView {
                         Layout.preferredHeight: Theme.primaryTextFontSize
                         Layout.preferredWidth: Layout.preferredHeight
                         Layout.leftMargin: 6
-                        visible: delegateRoot.remotelyDestructInProgress
+                        visible: delegate.remotelyDestructInProgress
                         color: Theme.palette.primaryColor1
                     }
                 }