[app] Optimize BooksShelfItem

Use Loader to instantiate components on demand

app/qml/BooksShelfItem.qml

@@ -1,5 +1,5 @@
 /*
-  Copyright (C) 2015 Jolla Ltd.
+  Copyright (C) 2015-2016 Jolla Ltd.
   Contact: Slava Monich <slava.monich@jolla.com>
 
   You may use this file under the terms of BSD license as follows:
@@ -46,7 +46,7 @@ Item {
     property alias book: cover.book
     property alias synchronous: cover.synchronous
     property alias remorseTimeout: deleteAnimation.duration
-    property alias copyProgress: progressIndicator.value
+    property real copyProgress
     property real margins: Theme.paddingMedium
     property real deleteAllOpacity: 1
     property bool editMode
@@ -69,19 +69,27 @@ Item {
     readonly property real _borderRadius: Theme.paddingSmall
     readonly property color _borderColor: Theme.primaryColor
     readonly property real _borderWidth: 2
+    readonly property bool _haveProgress: copyProgress > 0 && copyProgress < 1
+    readonly property real _coverCenterX: cover.x + (cover.width - _deleteButtonSize)/2
+    readonly property real _coverCenterY: cover.y + cover.height - _deleteButtonSize/2
+    readonly property real _deleteButtonSize: 3*margins
+    readonly property real _deleteButtonMargin: Theme.paddingMedium
 
     property bool scaledDown: (editMode && !dragged && !pressed && !dropped)
 
-    Image {
+    Loader {
+        active: !cover.book
         anchors {
             margins: root.margins
             fill: parent
         }
+        sourceComponent: Image {
             visible: !cover.book
             source: "images/bookshelf.svg"
             sourceSize.width: width
             sourceSize.height: height
         }
+    }
 
     BookCover {
         id: cover
@@ -127,23 +135,28 @@ Item {
         onClicked: root.clicked()
     }
 
-    BooksDeleteButton {
+    Loader {
         id: deleteButton
-        x: cover.x + (cover.width - width)/2
+        active: editMode
-        y: cover.y + cover.height - height/2
+        sourceComponent: BooksDeleteButton {
-        size: 3*margins
+            x: _coverCenterX
-        enabled: editMode && !pressed && !deleting && !deletingAll && !copyingIn && !copyingOut
+            y: _coverCenterY
+            size: _deleteButtonSize
+            margin: _deleteButtonMargin
+            visible: !pressed && !deleting && !deletingAll && !copyingIn && !copyingOut
             onClicked: root.deleteRequested()
         }
+    }
 
-    ProgressCircle {
+    Loader {
-        id: progressIndicator
+        active: copying && !longCopyTimer.running && _haveProgress
+        anchors.centerIn: busyIndicator
+        sourceComponent:  ProgressCircle {
+            value: copyProgress
             width: busyIndicator.width
             height: width
-        anchors.centerIn: busyIndicator
+            inAlternateCycle: true
-        opacity: (copying && !longCopyTimer.running && value > 0 && value < 1) ? 1 : 0
+        }
-        visible: opacity > 0
-        Behavior on opacity { FadeAnimation {} }
     }
 
     BusyIndicator {
@@ -152,15 +165,15 @@ Item {
         x: cover.x + cover.centerX - width/2
         y: cover.y + cover.centerY - height/2
         visible: opacity > 0
-        running: copying && !longCopyTimer.running && (progressIndicator.value <= 0 || progressIndicator.value >= 1)
+        running: copying && !longCopyTimer.running && !_haveProgress
         Behavior on opacity { enabled: false }
     }
 
     function withinDeleteButton(x, y) {
-        return x >= deleteButton.x - deleteButton.margin &&
+        return x >= _coverCenterX - _deleteButtonMargin &&
-               x < deleteButton.x + deleteButton.width + deleteButton.margin &&
+           x < _coverCenterX + _deleteButtonSize + _deleteButtonMargin &&
-               y >= deleteButton.y - deleteButton.margin &&
+           y >= _coverCenterY - _deleteButtonMargin &&
-               y < deleteButton.y + deleteButton.height + deleteButton.margin;
+           y < _coverCenterY + _deleteButtonSize + _deleteButtonMargin
     }
 
     function updateScaledDown() {