Added refresh moving icon for feedback purpose

While refreshing the material sync, no feedback was provided before, now there is a refreshing icon animation available for "refresh in progress"

fixes: CURA-8754

resources/qml/Preferences/Materials/MaterialsSyncDialog.qml

@@ -429,10 +429,59 @@ UM.Window
                                 Cura.SecondaryButton
                                 {
                                     id: refreshListButton
+                                    property int accountState: Cura.API.account.syncState
                                     Layout.alignment: Qt.AlignVCenter
                                     text: catalog.i18nc("@button", "Refresh List")
                                     iconSource: UM.Theme.getIcon("ArrowDoubleCircleRight")
                                     onClicked: Cura.API.account.sync(true)
+
+                                    onAccountStateChanged: {
+                                        if (Cura.API.account.syncState == 0)
+                                        {
+                                            refreshListButton.visible = false;
+                                        }
+                                        if (Cura.API.account.syncState == 1)
+                                        {
+                                            refreshListButton.visible = true;
+                                        }
+                                    }
+                                }
+
+                                Item
+                                {
+                                    width: childrenRect.width
+                                    Layout.alignment: Qt.AlignVCenter
+                                    height: refreshListButton.height
+                                    visible: !refreshListButton.visible
+
+                                    UM.ColorImage
+                                    {
+                                        id: refreshingIcon
+                                        height: UM.Theme.getSize("action_button_icon").height
+                                        width: height
+                                        anchors.verticalCenter: refreshingLabel.verticalCenter
+                                        source: UM.Theme.getIcon("ArrowDoubleCircleRight")
+                                        color: UM.Theme.getColor("primary")
+
+                                        RotationAnimator
+                                        {
+                                            target: refreshingIcon
+                                            from: 0
+                                            to: 360
+                                            duration: 1000
+                                            loops: Animation.Infinite
+                                            running: true
+                                        }
+                                    }
+                                    UM.Label
+                                    {
+                                        id: refreshingLabel
+                                        anchors.left: refreshingIcon.right
+                                        anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
+                                        text: catalog.i18nc("@button", "Refreshing...")
+                                        color: UM.Theme.getColor("primary")
+                                        font: UM.Theme.getFont("medium")
+                                    }
                                 }
 
                                 Cura.TertiaryButton