feat(ui/modules/Linphone/Chat): use a custom QML2 `BusyIndicator`

tests/resources.qrc

@@ -134,6 +134,7 @@
     <file>assets/images/video_call_pressed.svg</file>
     <file>ui/modules/Common/Animations/CaterpillarAnimation.qml</file>
     <file>ui/modules/Common/Borders.qml</file>
+    <file>ui/modules/Common/BusyIndicator.qml</file>
     <file>ui/modules/Common/Collapse.qml</file>
     <file>ui/modules/Common/Colors.qml</file>
     <file>ui/modules/Common/Constants.qml</file>
@@ -172,6 +173,7 @@
     <file>ui/modules/Common/SearchBox.qml</file>
     <file>ui/modules/Common/SmartConnect.qml</file>
     <file>ui/modules/Common/Styles/Animations/CaterpillarAnimationStyle.qml</file>
+    <file>ui/modules/Common/Styles/BusyIndicatorStyle.qml</file>
     <file>ui/modules/Common/Styles/CollapseStyle.qml</file>
     <file>ui/modules/Common/Styles/DialogStyle.qml</file>
     <file>ui/modules/Common/Styles/DroppableTextAreaStyle.qml</file>

tests/ui/modules/Common/BusyIndicator.qml

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+import Common.Styles 1.0
+
+// =============================================================================
+
+BusyIndicator {
+	id: busyIndicator
+
+	// ---------------------------------------------------------------------------
+
+	readonly property int _rotation: 360
+	readonly property int _size: width < height ? width : height
+
+	// ---------------------------------------------------------------------------
+
+	contentItem: Item {
+		x: parent.width / 2 - width / 2
+		y: parent.height / 2 - height / 2
+
+		height: _size
+		width: _size
+
+		Item {
+			id: item
+
+			height: parent.height
+			width: parent.width
+
+			// -----------------------------------------------------------------------
+			// Animation.
+			// -----------------------------------------------------------------------
+
+			RotationAnimator {
+				duration: BusyIndicatorStyle.duration
+				loops: Animation.Infinite
+				running: busyIndicator.visible && busyIndicator.running
+				target: item
+
+				from: 0
+				to: busyIndicator._rotation
+			}
+
+			// -----------------------------------------------------------------------
+			// Items to draw.
+			// -----------------------------------------------------------------------
+
+			Repeater {
+				id: repeater
+
+				model: BusyIndicatorStyle.nSpheres
+
+				Rectangle {
+					x: item.width / 2 - width / 2
+					y: item.height / 2 - height / 2
+
+					height: item.height / 3
+					width: item.width / 3
+
+					color: BusyIndicatorStyle.color
+					radius: (width > height ? width : height) / 2
+
+					transform: [
+					  Translate {
+							y: busyIndicator._size / 2
+						},
+						Rotation {
+							angle: index / repeater.count * busyIndicator._rotation
+							origin {
+								x: width / 2
+								y: height / 2
+							}
+						}
+					]
+				}
+			}
+		}
+	}
+}

tests/ui/modules/Common/Styles/BusyIndicatorStyle.qml

+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// =============================================================================
+
+QtObject {
+	property color color: Colors.i
+	property int duration: 1250
+	property int nSpheres: 6
+}

tests/ui/modules/Common/Styles/qmldir

@@ -4,6 +4,8 @@ module Common.Styles
 
 # Components styles ------------------------------------------------------------
 
+singleton BusyIndicatorStyle        1.0 BusyIndicatorStyle.qml
+
 singleton CaterpillarAnimationStyle 1.0 Animations/CaterpillarAnimationStyle.qml
 
 singleton CollapseStyle             1.0 CollapseStyle.qml

tests/ui/modules/Common/qmldir

-# ====================================================================
+# ==============================================================================
 # Common's components to export.
-# ====================================================================
+# ==============================================================================
 
 module Common
 
-# Constants ----------------------------------------------------------
+# Constants --------------------------------------------------------------------
 
 singleton Colors     1.0 Colors.qml
 singleton Constants  1.0 Constants.qml
 
-# Components ---------------------------------------------------------
+# Components -------------------------------------------------------------------
 
 # Animations
 CaterpillarAnimation 1.0 Animations/CaterpillarAnimation.qml
@@ -17,6 +17,9 @@ CaterpillarAnimation 1.0 Animations/CaterpillarAnimation.qml
 # Chat
 Borders              1.0 Borders.qml
 
+# BusyIndicator
+BusyIndicator        1.0 BusyIndicator.qml
+
 # Collapse
 Collapse             1.0 Collapse.qml
 

tests/ui/modules/Linphone/Chat/FileMessage.qml

@@ -223,13 +223,13 @@ Row {
 
       Component {
         id: indicator
-        BusyIndicator {
-          width: ChatStyle.entry.message.outgoing.sendIconSize
-        }
+        BusyIndicator {}
       }
 
       Loader {
         height: ChatStyle.entry.lineHeight
+        width: ChatStyle.entry.message.outgoing.sendIconSize
+
         sourceComponent: $chatEntry.isOutgoing
           ? (
             $chatEntry.status === ChatModel.MessageStatusInProgress

tests/ui/modules/Linphone/Chat/OutgoingMessage.qml

@@ -52,13 +52,13 @@ Item {
 
       Component {
         id: indicator
-        BusyIndicator {
-          width: ChatStyle.entry.message.outgoing.sendIconSize
-        }
+        BusyIndicator {}
       }
 
       Loader {
         height: ChatStyle.entry.lineHeight
+        width: ChatStyle.entry.message.outgoing.sendIconSize
+
         sourceComponent: $chatEntry.status === ChatModel.MessageStatusInProgress
           ? indicator
           : icon