show spinner during avatar thumbnails loading

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 {

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

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

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

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

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