feat(Components): introduce StatusLoadingIndicator

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
}
```

Closes #7

ui/StatusQ/README.md

@@ -9,6 +9,7 @@ These modules are:
 
 - [StatusQ.Core](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/qmldir)
 - [StatusQ.Core.Theme](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/qmldir)
+- [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
 
 Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.
 Other than that, modules and components can be used as expected.

ui/StatusQ/sandbox/Others.qml

@@ -0,0 +1,16 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+GridLayout {
+    columns: 6
+    columnSpacing: 5
+    rowSpacing: 5
+    property ThemePalette theme
+
+    StatusLoadingIndicator {
+        color: parent.theme.directColor4
+    }
+}

ui/StatusQ/sandbox/main.qml

@@ -29,6 +29,11 @@ Window {
             checkable: true
             text: "Icons"
         }
+        Button {
+            id: otherTab
+            checkable: true
+            text: "Other"
+        }
     }
 
     ScrollView {
@@ -62,6 +67,8 @@ Window {
                         switch(topicsGroup.checkedButton) {
                         case iconsTab:
                             return iconsComponent;
+                        case otherTab:
+                            return othersComponent;
                         default:
                             return null;
                         }
@@ -88,6 +95,8 @@ Window {
                         switch(topicsGroup.checkedButton) {
                         case iconsTab:
                             return iconsComponent;
+                        case otherTab:
+                            return othersComponent;
                         default:
                             return null;
                         }
@@ -132,4 +141,12 @@ Window {
             iconColor: parent? parent.currentTheme.primaryColor1 : "#ffffff"
         }
     }
+
+    Component {
+        id: othersComponent
+        Others {
+            anchors.centerIn: parent
+            theme: parent.currentTheme
+        }
+    }
 }

ui/StatusQ/sandbox/qml.qrc

@@ -2,5 +2,6 @@
     <qresource prefix="/">
         <file>main.qml</file>
         <file>Icons.qml</file>
+        <file>Others.qml</file>
     </qresource>
 </RCC>

ui/StatusQ/src/StatusQ/Components/StatusLoadingIndicator.qml

@@ -0,0 +1,18 @@
+import QtQuick 2.13
+import StatusQ.Core 0.1
+
+StatusIcon {
+    id: statusIcon
+    icon: "loading"
+    height: 17
+    width: 17
+    RotationAnimator {
+        target: statusIcon;
+        from: 0;
+        to: 360;
+        duration: 1200
+        running: true
+        loops: Animation.Infinite
+    }
+}
+

ui/StatusQ/src/StatusQ/Components/qmldir

@@ -0,0 +1,3 @@
+module StatusQ.Components
+
+StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml