feat(app): add new animation `Animations/CaterpillarAnimation.qml`

tests/resources.qrc

@@ -26,6 +26,7 @@
     <file>imgs/right_arrow.svg</file>
     <file>imgs/speaker.svg</file>
     <file>imgs/valid.svg</file>
+    <file>ui/modules/Common/Animations/CaterpillarAnimation.qml</file>
     <file>ui/modules/Common/Borders.qml</file>
     <file>ui/modules/Common/Collapse.qml</file>
     <file>ui/modules/Common/Colors.qml</file>
@@ -92,6 +93,7 @@
     <file>ui/modules/Linphone/Timeline.qml</file>
     <file>ui/scripts/Utils/qmldir</file>
     <file>ui/scripts/Utils/utils.js</file>
+    <file>ui/scripts/Utils/utils.spec.qml</file>
     <file>ui/views/Calls/Calls.qml</file>
     <file>ui/views/Calls/StartingCall.qml</file>
     <file>ui/views/Calls/StartingIncomingCall.qml</file>

tests/ui/modules/Common/Animations/CaterpillarAnimation.qml

+import QtQuick 2.7
+
+Row {
+  id: container
+
+  property int sphereSize: 10
+  property int nSpheres: 3
+
+  spacing: 6
+
+  Repeater {
+    model: nSpheres
+
+    Rectangle {
+      id: ymovingBox
+
+      color: '#8F8F8F'
+      height: container.sphereSize
+      radius: container.sphereSize / 2
+      width: container.sphereSize
+
+      onYChanged: console.log('y changed', y)
+
+      YAnimator on y {
+        id: animator
+
+        duration: 500
+        from: 10
+        running: true
+        to: 0
+
+        onRunningChanged: {
+          if (!running) {
+            if (to === 0) {
+              to = 10
+              from = 0
+            } else {
+              to = 0
+              from = 10
+            }
+
+            animator.running = true
+          }
+        }
+      }
+    }
+  }
+}

tests/ui/modules/Common/qmldir

@@ -11,6 +11,9 @@ singleton Constants  1.0 Constants.qml
 
 # Components ---------------------------------------------------------
 
+# Animations
+CaterpillarAnimation 1.0 Animations/CaterpillarAnimation.qml
+
 # Chat
 Borders              1.0 Borders.qml
 

tests/ui/views/Calls/StartingCall.qml

@@ -35,13 +35,8 @@ Rectangle {
         width: parent.width
       }
 
-      Text {
-        color: '#8E8E8E'
-        font.bold: true
-        font.pointSize: 17
-        horizontalAlignment: Text.AlignHCenter
-        text: '...'
-        width: parent.width
+      CaterpillarAnimation {
+        anchors.horizontalCenter: parent.horizontalCenter
       }
     }