Showing a busy indicator or a loading image while loading large QML file

[trupti007]

This post is deleted!

[sierdzio]

Use BusyIndicator - display it above the Loader you use to load your UI. When Loader's status indicates that loading is finished - hide the BusyIndicator.

[trupti007]

This post is deleted!

[J.Hilk]

@trupti007 said in Showing a busy indicator or a loading image while loading large QML file:

@sierdzio i did not used loader in my page though

Interesting, and how do you make it "where I dynamically load the content"

more information may lead to "better" answers.

How ever you do it, @sierdzio suggestion still holds true, just differently.

[trupti007]

@J-Hilk Dynamically means all the content like images or text i am getting these from server. that is what i am talking about

[sierdzio]

As long as you have some property or signal in your code which changes value or gets emitted when loading is finished - my solution will still work. Just hide the BusyIndicator when loading is finished.

[J.Hilk]

@trupti007 still very ambiguous but here's an example:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.2
import QtQuick.Layouts 1.12

Window
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "green"
    id: win

    Timer
    {
        running: true
        interval: 5000
        repeat: false
        onTriggered: img.source = "https://images.pexels.com/photos/1525041/pexels-photo-1525041.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    }

    Item{
        id: frameImageAndIndicator
        anchors.fill: parent

        Image {
            id: img
            anchors.fill: parent
            asynchronous: true

            fillMode: Image.PreserveAspectFit
        }

        BusyIndicator{
            anchors.fill: parent
            visible: img.progress != 1 || img.source == ""
        }
    }
}