Add skeleton loading to print job queue

Contributes to CL-1157

plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml

@@ -15,6 +15,7 @@ Item
     id: base
 
     property bool expanded: false
+    property bool enabled: true
     property var borderWidth: 1
     property color borderColor: "#CCCCCC"
     property color headerBackgroundColor: "white"
@@ -34,7 +35,7 @@ Item
             color: borderColor
             width: borderWidth
         }
-        color: headerMouseArea.containsMouse ? headerHoverColor : headerBackgroundColor
+        color: base.enabled && headerMouseArea.containsMouse ? headerHoverColor : headerBackgroundColor
         height: childrenRect.height
         width: parent.width
         Behavior on color
@@ -50,8 +51,12 @@ Item
     {
         id: headerMouseArea
         anchors.fill: header
-        onClicked: base.expanded = !base.expanded
+        onClicked:
-        hoverEnabled: true
+        {
+            if (!base.enabled) return
+            base.expanded = !base.expanded
+        }
+        hoverEnabled: base.enabled
     }
 
     Rectangle

plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml

@@ -26,6 +26,7 @@ Item
 
     ExpandableCard
     {
+        enabled: printJob != null
         borderColor: printJob.configurationChanges.length !== 0 ? "#f5a623" : "#CCCCCC" // TODO: Theme!
         headerItem: Row
         {
@@ -41,32 +42,56 @@ Item
                 anchors.verticalCenter: parent.verticalCenter
             }
 
-            Label
+            Item
             {
-                text: printJob && printJob.name ? printJob.name : ""
-                color: "#374355"
-                elide: Text.ElideRight
-                font: UM.Theme.getFont("medium") // 14pt, regular
                 anchors.verticalCenter: parent.verticalCenter
-                width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
-
-                // FIXED-LINE-HEIGHT:
                 height: 18 * screenScaleFactor // TODO: Theme!
-                verticalAlignment: Text.AlignVCenter
+                width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
+                Rectangle
+                {
+                    color: "#eeeeee"
+                    width: Math.round(parent.width / 2)
+                    height: parent.height
+                    visible: !printJob
+                }
+                Label
+                {
+                    text: printJob && printJob.name ? printJob.name : ""
+                    color: "#374355"
+                    elide: Text.ElideRight
+                    font: UM.Theme.getFont("medium") // 14pt, regular
+                    visible: printJob
+
+                    // FIXED-LINE-HEIGHT:
+                    height: parent.height
+                    verticalAlignment: Text.AlignVCenter
+                }
             }
 
-            Label
+            Item
             {
-                text: printJob ? OutputDevice.formatDuration(printJob.timeTotal) : ""
-                color: "#374355"
-                elide: Text.ElideRight
-                font: UM.Theme.getFont("medium") // 14pt, regular
                 anchors.verticalCenter: parent.verticalCenter
-                width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
-
-                // FIXED-LINE-HEIGHT:
                 height: 18 * screenScaleFactor // TODO: Theme!
-                verticalAlignment: Text.AlignVCenter
+                width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
+                Rectangle
+                {
+                    color: "#eeeeee"
+                    width: Math.round(parent.width / 3)
+                    height: parent.height
+                    visible: !printJob
+                }
+                Label
+                {
+                    text: printJob ? OutputDevice.formatDuration(printJob.timeTotal) : ""
+                    color: "#374355"
+                    elide: Text.ElideRight
+                    font: UM.Theme.getFont("medium") // 14pt, regular
+                    visible: printJob
+
+                    // FIXED-LINE-HEIGHT:
+                    height: 18 * screenScaleFactor // TODO: Theme!
+                    verticalAlignment: Text.AlignVCenter
+                }
             }
 
             Item
@@ -75,6 +100,14 @@ Item
                 height: 18 * screenScaleFactor // TODO: This should be childrenRect.height but QML throws warnings
                 width: childrenRect.width
 
+                Rectangle
+                {
+                    color: "#eeeeee"
+                    width: 72 * screenScaleFactor // TODO: Theme!
+                    height: parent.height
+                    visible: !printJob
+                }
+
                 Label
                 {
                     id: printerAssignmentLabel
@@ -100,7 +133,7 @@ Item
                     width: 120 * screenScaleFactor // TODO: Theme!
 
                     // FIXED-LINE-HEIGHT:
-                    height: 18 * screenScaleFactor // TODO: Theme!
+                    height: parent.height
                     verticalAlignment: Text.AlignVCenter
                 }
 
@@ -115,6 +148,7 @@ Item
                     }
                     height: childrenRect.height
                     spacing: 6 // TODO: Theme!
+                    visible: printJob
 
                     Repeater
                     {

plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml

@@ -144,7 +144,6 @@ Item
             topMargin: 12 * screenScaleFactor // TODO: Theme!
         }
         style: UM.Theme.styles.scrollview
-        visible: OutputDevice.receivedPrintJobs
         width: parent.width
 
         ListView
@@ -160,7 +159,7 @@ Item
                 }
                 printJob: modelData
             }
-            model: OutputDevice.queuedPrintJobs
+            model: OutputDevice.receivedPrintJobs ? OutputDevice.queuedPrintJobs.concat([null,null]) : [null,null]
             spacing: 6  // TODO: Theme!
         }
     }