Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



  • I'm working on a QML based app. where I dynamically load the content. However when running the application it takes quite a long time (5-10 secs), so I need to show any loading screen or indicator while the whole content is being loaded. Can anyone suggest me how to do it ?

    For example, after I login in my application it took some time to load the next page so within that period of time i want to show the loading screen.

    App {
        id: app
        height: 400
        width: 200
            Rectangle {
                id: rectangle       
                Button {
                    id: button
                    text: qsTr("GO TO NEXT PAGE")
                    onClicked:stackView.push("page2.qml")                
                }        
                Image {
                    id: image
                    fillMode: Image.PreserveAspectFit
                    source: "default-app.png"
                }
            }
        
    }
    
    

    suppose this is my code , then where can i use loader ? I want to show the busy indicator when i redirect to next page


  • Moderators

    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.



  • @sierdzio i did not used loader in my page though


  • Moderators

    @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.



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


  • Moderators

    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.


  • Moderators

    @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 == ""
            }
        }
    }
    
    

Log in to reply