feat: introduce StatusLoadingIndicator component

A `StatusIcon` that rotates infinitely and can be used for indicating
pending states.

Usage:

```
StatusLoadingIndicator {
    width: 24 // default: 17
    height: 24 // default: 17
    color: "red" // default: loading asset color
}
```

This also removes `LoadingImage` component from `ui/shared`.

Closes #2360

ui/app/AppLayouts/Browser/DownloadElement.qml

@@ -2,6 +2,7 @@ import QtQuick 2.1
 import QtQuick.Controls 2.13
 import QtGraphicalEffects 1.13
 import "../../../shared"
+import "../../../shared/status/core"
 import "../../../shared/status"
 import "../../../imports"
 
@@ -65,7 +66,7 @@ Rectangle {
 
         Component {
             id: loadingImageComponent
-            LoadingImage {}
+            StatusLoadingIndicator {}
         }
         Component {
             id: fileImageComponent

ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import "../../../../imports"
 import "../../../../shared"
+import "../../../../shared/status/core"
 import "../../../../shared/status"
 import "./Contacts"
 
@@ -115,7 +116,7 @@ Item {
 
         Component {
             id: loadingIndicator
-            LoadingImage {
+            StatusLoadingIndicator {
                 width: 12
                 height: 12
             }

ui/app/AppLayouts/Profile/Sections/Ens/ENSDetails.qml

@@ -3,6 +3,7 @@ import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.14
 import "../../../../../imports"
 import "../../../../../shared"
+import "../../../../../shared/status/core"
 import "../../../../../shared/status"
 
 Item {
@@ -25,7 +26,7 @@ Item {
 
     Component {
         id: loadingImageComponent
-        LoadingImage {}
+        StatusLoadingIndicator {}
     }
 
     Loader {

ui/app/AppLayouts/Wallet/HistoryTab.qml

@@ -5,6 +5,7 @@ import "./components"
 import "./data"
 import "../../../imports"
 import "../../../shared"
+import "../../../shared/status/core"
 import "../../../shared/status"
 
 Item {
@@ -54,7 +55,7 @@ Item {
 
     Component {
         id: loadingImageComponent
-        LoadingImage {}
+        StatusLoadingIndicator {}
     }
 
     Connections {

ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesHeader.qml

@@ -2,6 +2,8 @@ import QtQuick 2.13
 import QtGraphicalEffects 1.13
 import "../../../../../imports"
 import "../../../../../shared"
+import "../../../../../shared/status/core"
+import "../../../../../shared/status"
 
 Rectangle {
     property url collectibleIconSource: "../../../../img/collectibles/CryptoKitties.png"
@@ -60,7 +62,7 @@ Rectangle {
     Component {
         id: loadingComponent
 
-        LoadingImage {}
+        StatusLoadingIndicator {}
     }
 
     Component {

ui/shared/EnsResolver.qml

@@ -3,6 +3,8 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
 import "../imports"
+import "./status/core"
+import "./status"
 
 Item {
     id: root
@@ -32,7 +34,7 @@ Item {
 
     Component {
         id: loadingIndicator
-        LoadingImage {
+        StatusLoadingIndicator {
             width: root.width
             height: root.height
         }

ui/shared/ImageLoader.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.3
 import QtGraphicalEffects 1.13
 import "../imports"
+import "./status/core"
+import "./status"
 
 Rectangle {
     id: root
@@ -98,15 +100,10 @@ Rectangle {
 
     Component {
         id: loadingIndicator
-        LoadingImage {
+        StatusLoadingIndicator {
             width: 23
             height: 23
-            ColorOverlay {
+            color: Style.current.secondaryText
-                anchors.fill: parent
-                source: parent
-                color: Style.current.secondaryText
-                antialiasing: true
-            }
         }
     }
 

ui/shared/status/StatusButton.qml

@@ -4,6 +4,7 @@ import QtQml 2.14
 import QtGraphicalEffects 1.13
 import "../../imports"
 import "../../shared"
+import "./core"
 
 Button {
     property string type: "primary"
@@ -95,7 +96,7 @@ Button {
 
         Component {
             id: loadingComponent
-            LoadingImage {}
+            StatusLoadingIndicator {}
         }
 
         Loader {

ui/shared/status/StatusRoundButton.qml

@@ -4,6 +4,7 @@ import QtGraphicalEffects 1.13
 import QtQml 2.14
 import "../../imports"
 import "../../shared"
+import "./core"
 
 RoundButton {
     property string type: "primary"
@@ -162,8 +163,10 @@ RoundButton {
 
         Component {
             id: loadingComponent
-            LoadingImage {
+            StatusLoadingIndicator {
-
+                color: control.size === "medium" || control.size === "small" ?
+                  Style.current.roundedButtonSecondaryDisabledForegroundColor :
+                  Style.current.roundedButtonDisabledForegroundColor
             }
         }
 
@@ -193,17 +196,6 @@ RoundButton {
             }
             antialiasing: true
         }
-
-        ColorOverlay {
-            id: loadingOverlay
-            visible: loadingIndicator.active
-            anchors.fill: loadingIndicator
-            source: loadingIndicator
-            color: control.size === "medium" || control.size === "small" ?
-              Style.current.roundedButtonSecondaryDisabledForegroundColor :
-              Style.current.roundedButtonDisabledForegroundColor
-            antialiasing: true
-        }
     }
 
     MouseArea {

ui/shared/status/StatusStickersPopup.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.3
 import QtGraphicalEffects 1.0
 import "../../imports"
 import "../../shared"
+import "../../shared/status/core"
 import "../../shared/status"
 import "../../app/AppLayouts/Chat/ChatColumn/samples"
 
@@ -152,7 +153,7 @@ Popup {
 
             Component {
                 id: loadingImageComponent
-                LoadingImage {
+                StatusLoadingIndicator {
                     width: 50
                     height: 50
                 }

ui/shared/status/assets/img/icons/loading.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4026 7.61613C15.1003 6.27604 14.3668 5.06612 13.3089 4.16834C12.2508 3.27037 10.9252 2.73329 9.52966 2.6397C8.13414 2.54611 6.74648 2.90125 5.5742 3.65036C4.40214 4.39934 3.50926 5.50117 3.02621 6.78932C2.54323 8.07728 2.49501 9.48441 2.88849 10.8014C3.28202 12.1185 4.09701 13.277 5.21455 14.1023C6.3323 14.9278 7.6921 15.375 9.09086 15.375L9.09086 17.625C7.21319 17.625 5.38448 17.0249 3.87789 15.9123C2.3711 14.7995 1.26676 13.2331 0.732658 11.4455C0.198503 9.65769 0.264129 7.74689 0.919466 5.9993C1.57473 4.2519 2.78355 2.76349 4.36265 1.75441C5.94153 0.745467 7.80684 0.269103 9.68023 0.394746C11.5536 0.520391 13.3374 1.24153 14.7648 2.45282C16.1923 3.66429 17.187 5.30147 17.5974 7.12107L15.4026 7.61613Z" fill="#939BA1"/>
+</svg>

ui/shared/status/core/StatusLoadingIndicator.qml

@@ -1,14 +1,13 @@
 import QtQuick 2.13
 import "."
 
-SVGImage {
+StatusIcon {
-    id: loadingImg
+    id: root
-    source: "../app/img/loading.svg"
+    icon: "loading"
-    width: 17
     height: 17
-    fillMode: Image.Stretch
+    width: 17
     RotationAnimator {
-        target: loadingImg;
+        target: root;
         from: 0;
         to: 360;
         duration: 1200