Use ListView instead of Column

The ListView works in mostly the same way, except it loads its contents asynchronously as they come into view.

Contributes to issue CURA-8556.

plugins/Marketplace/resources/qml/Plugins.qml

@@ -10,159 +10,163 @@ ScrollView
 {
     clip: true
 
-    Column
+    ListView
     {
         id: pluginColumn
         width: parent.width
-        spacing: UM.Theme.getSize("default_margin").height
 
-        Repeater
+        model: Marketplace.PackageList
         {
-            model: Marketplace.PackageList
-            {
-                id: pluginList
-            }
+            id: pluginList
+        }
+        spacing: UM.Theme.getSize("default_margin").height
 
-            delegate: Rectangle
-            {
-                width: pluginColumn.width
-                height: UM.Theme.getSize("card").height
+        delegate: Rectangle
+        {
+            width: pluginColumn.width
+            height: UM.Theme.getSize("card").height
 
-                color: UM.Theme.getColor("main_background")
-                radius: UM.Theme.getSize("default_radius").width
+            color: UM.Theme.getColor("main_background")
+            radius: UM.Theme.getSize("default_radius").width
 
-                Label
-                {
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.left: parent.left
-                    anchors.leftMargin: (parent.height - height) / 2
+            Label
+            {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.leftMargin: (parent.height - height) / 2
 
-                    text: model.package.displayName
-                    font: UM.Theme.getFont("medium_bold")
-                    color: UM.Theme.getColor("text")
-                }
+                text: model.package.displayName
+                font: UM.Theme.getFont("medium_bold")
+                color: UM.Theme.getColor("text")
             }
         }
-        Button
+
+        footer: Item //Wrapper item to add spacing between content and footer.
         {
-            id: loadMoreButton
             width: parent.width
-            height: UM.Theme.getSize("card").height
+            height: UM.Theme.getSize("card").height + pluginColumn.spacing
+            Button
+            {
+                id: loadMoreButton
+                width: parent.width
+                height: UM.Theme.getSize("card").height
+                anchors.bottom: parent.bottom
 
-            enabled: pluginList.hasMore && !pluginList.isLoading || pluginList.errorMessage != ""
-            onClicked: pluginList.request()  //Load next page in plug-in list.
+                enabled: pluginList.hasMore && !pluginList.isLoading || pluginList.errorMessage != ""
+                onClicked: pluginList.request()  //Load next page in plug-in list.
 
-            background: Rectangle
-            {
-                anchors.fill: parent
-                radius: UM.Theme.getSize("default_radius").width
-                color: UM.Theme.getColor("main_background")
-            }
+                background: Rectangle
+                {
+                    anchors.fill: parent
+                    radius: UM.Theme.getSize("default_radius").width
+                    color: UM.Theme.getColor("main_background")
+                }
 
-            Row
-            {
-                anchors.centerIn: parent
+                Row
+                {
+                    anchors.centerIn: parent
 
-                spacing: UM.Theme.getSize("thin_margin").width
+                    spacing: UM.Theme.getSize("thin_margin").width
 
-                states:
-                [
-                    State
-                    {
-                        name: "Error"
-                        when: pluginList.errorMessage != ""
-                        PropertyChanges
+                    states:
+                    [
+                        State
                         {
-                            target: errorIcon
-                            visible: true
-                        }
-                        PropertyChanges
-                        {
-                            target: loadMoreIcon
-                            visible: false
-                        }
-                        PropertyChanges
-                        {
-                            target: loadMoreLabel
-                            text: catalog.i18nc("@button", "Failed to load plug-ins:") + " " + pluginList.errorMessage + "\n" + catalog.i18nc("@button", "Retry?")
-                        }
-                    },
-                    State
-                    {
-                        name: "Loading"
-                        when: pluginList.isLoading
-                        PropertyChanges
+                            name: "Error"
+                            when: pluginList.errorMessage != ""
+                            PropertyChanges
+                            {
+                                target: errorIcon
+                                visible: true
+                            }
+                            PropertyChanges
+                            {
+                                target: loadMoreIcon
+                                visible: false
+                            }
+                            PropertyChanges
+                            {
+                                target: loadMoreLabel
+                                text: catalog.i18nc("@button", "Failed to load plug-ins:") + " " + pluginList.errorMessage + "\n" + catalog.i18nc("@button", "Retry?")
+                            }
+                        },
+                        State
                         {
-                            target: loadMoreIcon
-                            source: UM.Theme.getIcon("ArrowDoubleCircleRight")
-                            color: UM.Theme.getColor("action_button_disabled_text")
-                        }
-                        PropertyChanges
+                            name: "Loading"
+                            when: pluginList.isLoading
+                            PropertyChanges
+                            {
+                                target: loadMoreIcon
+                                source: UM.Theme.getIcon("ArrowDoubleCircleRight")
+                                color: UM.Theme.getColor("action_button_disabled_text")
+                            }
+                            PropertyChanges
+                            {
+                                target: loadMoreLabel
+                                text: catalog.i18nc("@button", "Loading")
+                                color: UM.Theme.getColor("action_button_disabled_text")
+                            }
+                        },
+                        State
                         {
-                            target: loadMoreLabel
-                            text: catalog.i18nc("@button", "Loading")
-                            color: UM.Theme.getColor("action_button_disabled_text")
+                            name: "LastPage"
+                            when: !pluginList.hasMore
+                            PropertyChanges
+                            {
+                                target: loadMoreIcon
+                                visible: false
+                            }
+                            PropertyChanges
+                            {
+                                target: loadMoreLabel
+                                text: catalog.i18nc("@button", "No more results to load")
+                                color: UM.Theme.getColor("action_button_disabled_text")
+                            }
                         }
-                    },
-                    State
+                    ]
+
+                    Item
                     {
-                        name: "LastPage"
-                        when: !pluginList.hasMore
-                        PropertyChanges
+                        width: (errorIcon.visible || loadMoreIcon.visible) ? UM.Theme.getSize("small_button_icon").width : 0
+                        height: UM.Theme.getSize("small_button_icon").height
+                        anchors.verticalCenter: loadMoreLabel.verticalCenter
+
+                        UM.StatusIcon
                         {
-                            target: loadMoreIcon
+                            id: errorIcon
+                            anchors.fill: parent
+
+                            status: UM.StatusIcon.Status.ERROR
                             visible: false
                         }
-                        PropertyChanges
+                        UM.RecolorImage
                         {
-                            target: loadMoreLabel
-                            text: catalog.i18nc("@button", "No more results to load")
-                            color: UM.Theme.getColor("action_button_disabled_text")
+                            id: loadMoreIcon
+                            anchors.fill: parent
+
+                            source: UM.Theme.getIcon("ArrowDown")
+                            color: UM.Theme.getColor("secondary_button_text")
+
+                            RotationAnimator
+                            {
+                                target: loadMoreIcon
+                                from: 0
+                                to: 360
+                                duration: 1000
+                                loops: Animation.Infinite
+                                running: pluginList.isLoading
+                                alwaysRunToEnd: true
+                            }
                         }
                     }
-                ]
-
-                Item
-                {
-                    width: (errorIcon.visible || loadMoreIcon.visible) ? UM.Theme.getSize("small_button_icon").width : 0
-                    height: UM.Theme.getSize("small_button_icon").height
-                    anchors.verticalCenter: loadMoreLabel.verticalCenter
-
-                    UM.StatusIcon
-                    {
-                        id: errorIcon
-                        anchors.fill: parent
-
-                        status: UM.StatusIcon.Status.ERROR
-                        visible: false
-                    }
-                    UM.RecolorImage
+                    Label
                     {
-                        id: loadMoreIcon
-                        anchors.fill: parent
-
-                        source: UM.Theme.getIcon("ArrowDown")
+                        id: loadMoreLabel
+                        text: catalog.i18nc("@button", "Load more")
+                        font: UM.Theme.getFont("medium_bold")
                         color: UM.Theme.getColor("secondary_button_text")
-
-                        RotationAnimator
-                        {
-                            target: loadMoreIcon
-                            from: 0
-                            to: 360
-                            duration: 1000
-                            loops: Animation.Infinite
-                            running: pluginList.isLoading
-                            alwaysRunToEnd: true
-                        }
                     }
                 }
-                Label
-                {
-                    id: loadMoreLabel
-                    text: catalog.i18nc("@button", "Load more")
-                    font: UM.Theme.getFont("medium_bold")
-                    color: UM.Theme.getColor("secondary_button_text")
-                }
             }
         }
     }