From 99affb22f595eef5be2631f2b8801732f7920be8 Mon Sep 17 00:00:00 2001
From: Alexander Ivash <elderorb@gmail.com>
Date: Tue, 22 May 2018 00:54:44 +0300
Subject: [PATCH] show spinner during avatar thumbnails loading

---
 interface/resources/qml/hifi/AvatarApp.qml    | 18 ++++++++++++++++
 .../qml/hifi/avatarapp/AvatarThumbnail.qml    | 21 +++++++++++++++++++
 .../qml/hifi/avatarapp/RoundImage.qml         |  2 ++
 .../qml/hifi/avatarapp/ShadowImage.qml        |  2 ++
 .../qml/hifi/avatarapp/ShadowRectangle.qml    |  4 ++++
 .../resources/qml/hifi/avatarapp/Spinner.qml  |  7 +++++++
 6 files changed, 54 insertions(+)
 create mode 100644 interface/resources/qml/hifi/avatarapp/Spinner.qml

diff --git a/interface/resources/qml/hifi/AvatarApp.qml b/interface/resources/qml/hifi/AvatarApp.qml
index 1fa556886d..61d613b4aa 100644
--- a/interface/resources/qml/hifi/AvatarApp.qml
+++ b/interface/resources/qml/hifi/AvatarApp.qml
@@ -308,6 +308,24 @@ Rectangle {
             anchors.top: displayNameLabel.bottom
             anchors.topMargin: 31
             source: avatarUrl
+            visible: avatarImage.status !== Image.Loading
+        }
+
+        ShadowRectangle {
+            anchors.fill: avatarImage;
+            color: 'white'
+            visible: avatarImage.status === Image.Loading
+            radius: avatarImage.radius
+
+            dropShadowRadius: avatarImage.dropShadowRadius;
+            dropShadowHorizontalOffset: avatarImage.dropShadowHorizontalOffset
+            dropShadowVerticalOffset: avatarImage.dropShadowVerticalOffset
+
+            Spinner {
+                id: spinner
+                visible: parent.visible
+                anchors.fill: parent;
+            }
         }
 
         AvatarWearablesIndicator {
diff --git a/interface/resources/qml/hifi/avatarapp/AvatarThumbnail.qml b/interface/resources/qml/hifi/avatarapp/AvatarThumbnail.qml
index 39da0b67df..f015e95b0b 100644
--- a/interface/resources/qml/hifi/avatarapp/AvatarThumbnail.qml
+++ b/interface/resources/qml/hifi/avatarapp/AvatarThumbnail.qml
@@ -1,4 +1,5 @@
 import QtQuick 2.9
+import QtGraphicalEffects 1.0
 
 Item {
     width: 92
@@ -20,9 +21,29 @@ Item {
     ShadowImage {
         id: avatarImage
         anchors.fill: parent
+        visible: status !== Image.Loading
         radius: 5
     }
 
+    ShadowRectangle {
+        anchors.fill: parent;
+        color: 'white'
+        visible: avatarImage.status === Image.Loading
+        radius: avatarImage.radius
+        border.width: avatarImage.border.width
+        border.color: avatarImage.border.color
+
+        dropShadowRadius: avatarImage.dropShadowRadius;
+        dropShadowHorizontalOffset: avatarImage.dropShadowHorizontalOffset
+        dropShadowVerticalOffset: avatarImage.dropShadowVerticalOffset
+
+        Spinner {
+            id: spinner
+            visible: parent.visible
+            anchors.fill: parent;
+        }
+    }
+
     AvatarWearablesIndicator {
         id: indicator
         anchors.left: avatarImage.left
diff --git a/interface/resources/qml/hifi/avatarapp/RoundImage.qml b/interface/resources/qml/hifi/avatarapp/RoundImage.qml
index 378fe88ef5..f941cd0f1d 100644
--- a/interface/resources/qml/hifi/avatarapp/RoundImage.qml
+++ b/interface/resources/qml/hifi/avatarapp/RoundImage.qml
@@ -6,6 +6,8 @@ Item {
     property alias source: image.source
     property alias fillMode: image.fillMode
     property alias radius: mask.radius
+    property alias status: image.status
+    property alias progress: image.progress
 
     Image {
         id: image
diff --git a/interface/resources/qml/hifi/avatarapp/ShadowImage.qml b/interface/resources/qml/hifi/avatarapp/ShadowImage.qml
index be2089048c..9528646b80 100644
--- a/interface/resources/qml/hifi/avatarapp/ShadowImage.qml
+++ b/interface/resources/qml/hifi/avatarapp/ShadowImage.qml
@@ -9,6 +9,8 @@ Item {
     property alias dropShadowVerticalOffset: shadow.verticalOffset
     property alias radius: image.radius
     property alias border: image.border
+    property alias status: image.status
+    property alias progress: image.progress
 
     RoundImage {
         id: image
diff --git a/interface/resources/qml/hifi/avatarapp/ShadowRectangle.qml b/interface/resources/qml/hifi/avatarapp/ShadowRectangle.qml
index b843e295e3..0062683132 100644
--- a/interface/resources/qml/hifi/avatarapp/ShadowRectangle.qml
+++ b/interface/resources/qml/hifi/avatarapp/ShadowRectangle.qml
@@ -7,6 +7,9 @@ Item {
     property alias gradient: rectangle.gradient
     property alias border: rectangle.border
     property alias radius: rectangle.radius
+    property alias dropShadowRadius: shadow.radius
+    property alias dropShadowHorizontalOffset: shadow.horizontalOffset
+    property alias dropShadowVerticalOffset: shadow.verticalOffset
 
     Rectangle {
         id: rectangle
@@ -15,6 +18,7 @@ Item {
     }
 
     DropShadow {
+        id: shadow
         anchors.fill: rectangle
         radius: 6
         horizontalOffset: 0
diff --git a/interface/resources/qml/hifi/avatarapp/Spinner.qml b/interface/resources/qml/hifi/avatarapp/Spinner.qml
new file mode 100644
index 0000000000..3fc331346d
--- /dev/null
+++ b/interface/resources/qml/hifi/avatarapp/Spinner.qml
@@ -0,0 +1,7 @@
+import QtQuick 2.5
+import QtWebEngine 1.5
+
+AnimatedImage {
+    source: "../../../icons/loader-snake-64-w.gif"
+    playing: visible
+}