I want to show a BusyIndicator
while a long process is going on. The problem is it does not show up when I make it run and shows afterwards when the process is completed. According to the docs
The busy indicator should be used to indicate activity while content is being loaded or the UI is blocked waiting for a resource to become available.
I have created a minimal code that based upon the original code
Window {
id: win
width: 300
height: 300
property bool run : false
Rectangle {
anchors.fill: parent
BusyIndicator {
anchors.centerIn: parent
running: run
}
MouseArea {
anchors.fill: parent
onClicked: {
run = true
for(var a=0;a<1000000;a++) { console.log(a) }
run = false
}
}
}
}
So when the Rectangle
is clicked I want to display the BusyIndicator
for the time till the calculations gets completed.
For example purpose I have used the for loop here. In actual scenario I call a function (which inserts some 1000 rows into the Database) through the ContextProperty
. But in that case too the BusyIndicator
is not displayed.
Am I doing it the right way? Or what would be the best way to do it?
There is a way to do this using
QQuickWindow
'safterSynchronizing
signal:The idea is to use a
Loader
to have control over when the expensive operation happens. You could also use a dynamically loaded component viaQt.createQmlObject()
, orQt.createComponent()
to dynamically load a component in a separate file.If you run the example, you'll see that you get the following output:
We use
QQuickWindow
'safterSynchronizing
signal to know when the content of the window has been displayed, and only act on it the first time (viaif (!loader.item)
).When the signal is initially emitted, we can be sure that the
BusyIndicator
has started its animation, so the user will actually see a spinning icon.Once the
Loader
has finished loading the text, itsitem
property will become non-null and theBusyIndicator
will disappear.