Add nicer loading animation for images

qml/Components/ScreenPlayItem.qml

@@ -1,9 +1,8 @@
 import QtQuick 2.0
 import QtGraphicalEffects 1.0
 
-
 Item {
-    id:screenPlayItem
+    id: screenPlayItem
     width: 320
     height: 180
 
@@ -11,12 +10,6 @@ Item {
     property string screenId: ""
     signal itemClicked(var screenId)
 
-    OpacityMask {
-        anchors.fill: itemWrapper
-        source: itemWrapper
-        maskSource: mask
-        invert: true
-    }
 
     Image {
         id: mask
@@ -26,22 +19,22 @@ Item {
         visible: false
     }
 
-    Rectangle
-    {
+    Rectangle {
         id: itemWrapper
         color: "white"
-        radius: 23
-
+        radius: 6
+        clip: true
 
         anchors {
             fill: parent
-            margins:5
+            margins: 5
         }
 
         Rectangle {
             id: rectangle1
-            height: 103
+            height: 121
             color: "#8b8b8b"
+            clip: true
             anchors.right: parent.right
             anchors.rightMargin: 0
             anchors.left: parent.left
@@ -49,24 +42,30 @@ Item {
             anchors.top: parent.top
             anchors.topMargin: 0
 
-            Image {
-                id: image
-                asynchronous: true
-                fillMode: Image.PreserveAspectCrop
-                anchors.fill: parent
-                source: Qt.resolvedUrl("file:///" + installedListModel._screensPath + screenFolderId + "/" + screenPreview)
+            ScreenPlayItemImage {
+                id: screenPlayItemImage
+                sourceImage: Qt.resolvedUrl(
+                                 "file:///" + installedListModel._screensPath
+                                 + screenFolderId + "/" + screenPreview)
             }
         }
 
         Text {
             id: text1
+            y: 136
+            height: 29
             text: screenTitle
-            anchors.topMargin: 117
+            anchors.rightMargin: 156
+            anchors.leftMargin: 5
+            anchors.bottomMargin: 5
+            anchors.topMargin: 5
+            anchors.top: rectangle1.bottom
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
             wrapMode: Text.WrapAnywhere
-            anchors.fill: parent
-            font.pixelSize: 12
+            font.pixelSize: 11
             anchors.margins: 10
-
         }
 
         MouseArea {
@@ -75,8 +74,17 @@ Item {
                 itemClicked(screenId)
             }
         }
+
+        Item {
+            id: item1
+            x: 105
+            y: 127
+            width: 200
+            height: 38
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 5
+            anchors.right: parent.right
+            anchors.rightMargin: 5
+        }
     }
-
-
-
 }

qml/Components/ScreenPlayItemImage.qml

@@ -0,0 +1,60 @@
+import QtQuick 2.7
+
+Image {
+    id: image
+    width: 300
+    height: 250
+    state: "loading"
+
+    states: [
+        State {
+            name: "loading"
+
+            PropertyChanges {
+                target: image
+                opacity: 0
+            }
+        },
+        State {
+            name: "loaded"
+
+            PropertyChanges {
+                target: image
+                opacity: 1
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "loading"
+            to: "loaded"
+
+            NumberAnimation {
+                target: image
+                property: "opacity"
+                duration: 300
+                easing.type: Easing.InOutQuad
+            }
+        }
+    ]
+
+    property string sourceImage: ""
+
+    onSourceImageChanged: {
+        image.source = sourceImage
+    }
+
+    opacity: 0
+    anchors.bottomMargin: 0
+    antialiasing: false
+    asynchronous: true
+    fillMode: Image.PreserveAspectCrop
+    source: sourceImage
+    anchors.fill: parent
+
+    onStatusChanged: {
+        if (image.status == Image.Ready)
+            image.state = "loaded"
+    }
+}