How to preload the child.qml files while loading the main.qml file

James A

Hai All,

I have child.qml file with TableView. On clicking a button from the main.qml file it loads the child.qml file
There is delay in loading the child.qml Page due to the TableView component. And I am running this application in a embedded board.

How to preload the Child.qml file while loading the main.qml file. But make it visible only on clicking the button. ?
Or Is it possible to load the child.qml to the cache ? , so when I click the button for the second time it loads the qml file faster

main.qml

 msa_chager.onClicked: {
        console.log("clicked")
        StackView.view.push("child.qml")
    }

child.qml

Page {
    StackLayout {
        width: parent.width
        height: parent.height-tabBar.height
        currentIndex: tabBar.currentIndex

        LiveView{}
        
}

LiveView.qml

Item {
    id: item1
    property alias btn_ClearFaults: btn_ClearFaults

    TableView {
        anchors.fill: parent
        anchors.rightMargin: 20
        anchors.leftMargin: 25
        anchors.bottomMargin: 66
        anchors.topMargin: 20
        TableViewColumn {
            role: "ID"
            title: "ID"
            width: 100
        }
        TableViewColumn {
            role: "Description"
            title: "Description"
            width: 675
        }

        model: liveView
    }
}

kshegunov

Something along these lines?

Main.qml

RootQMLItem {
    id: rootItem
    property var childComponent;

    msa_chager.onClicked: {
        if (childComponent.status != Component.Ready)  {
            return // still loading
        }
        var item = childComponent.createObject(rootItem)
        StackView.view.push(item)
    }

    Component.onCompleted {
        childComponent = Qt.createComponent("child.qml", Component.Asynchronous, rootItem);
    }
}

... or you could use a Loader instead.

James A

@kshegunov

The creation of object is happening at the below line, which is again causing the delay in loading the UI.

 var item = childComponent.createObject(rootItem)

Is it possible to create the instance of the child.qml in Component.onCompleted function , but make it visible only after clicking the mouse. so the UI loads faster

kshegunov

@James-A said in How to preload the child.qml files while loading the main.qml file:

The creation of object is happening at the below line, which is again causing the delay in loading the UI.

If the object creation is the heavy thing, then you could incubate the object (offload the instantiation) - see here:
https://doc.qt.io/qt-5/qml-qtqml-component.html#incubateObject-method

Is it possible to create the instance of the child.qml in Component.onCompleted function , but make it visible only after clicking the mouse. so the UI loads faster.

Yes, it is. You just put the creation code there instead of the click handler. However do keep an instance to the component so you can check if it's been loaded/completed. Btw, doesn't Loader work for your case?

J.Hilk

@James-A like @kshegunov said, Loader is the way to go, make sure to set the asynchronous property to true