using a busy indicator when loading component

[jfinn88]

I want to use a busyIndicator when loading a qml component.... but no indicator appears

qml



BusyIndicator {
id: userEvent_busyInd
anchors.centerIn: parent
anchors.verticalCenterOffset: 100
z: 100
running: usereventcomponent.status === usereventcomponent.Loading
}

Action {
id: action_userEventLogBtn
enabled:!inSequence
onTriggered:{
//----Code to Load User Event Dialog-----//
UserEventLog.init();
weld_view.state = "USEREVENT"
xmui.insertLogMessage(rootItem.getUserName(), "User entered userEventDialog");
}
}

State {
name: "USEREVENT"
PropertyChanges {target: mask; visible:true; z: 1;}
PropertyChanges {target: usereventlog_loader; sourceComponent:usereventcomponent;}
}

Loader{
id: usereventlog_loader
width: 1300
height: 600
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
sourceComponent: null
z: 3
}

Component {
id: usereventcomponent
UserEventDialog {
id: userEventLog
}
}

[anda_skoa]

Does the loading take long enough for the indicator to even become visually recognizable?

Does it show when you just set its "running" property to true?

Cheers,
_

[jfinn88]

yes it shows when I set the running property to true.

I was wondering the same thing if it takes long enough for the indicator to be visible I'm not sure how to tell. I eventually want to use the busyIndicator to when searching database... but would like to get simpler version working first when jsut the qml component loads....

[anda_skoa]

The Loader could be too quick for you to notice the indicator.

Try something like a Timer element to change a boolean property after a noticable time, e.g. 200ms.

Cheers,
_

[jfinn88]

that's what I was thinking I will give it a try...

update: not able to get it working right....

the interval property seems to delay the busyIndacator image from appearing instead of the component...



Timer {
id: delay
interval: 5000
onTriggered:{
userEvent_busyInd.running = true
}
}

BusyIndicator {
id: userEvent_busyInd
anchors.centerIn: parent
anchors.verticalCenterOffset: 100
z: 100
running: true //usereventcomponent.status === usereventcomponent.Loading
}

Component.onCompleted: {
delay.stop();
userEvent_busyInd.running = false
}


action that loads component



Action {
id: action_userEventLogBtn
enabled:!inSequence
onTriggered:{
//----Code to Load User Event Dialog-----//
UserEventLog.init();
weld_view.state = "USEREVENT"
xmui.insertLogMessage(rootItem.getUserName(), "User entered userEventDialog");
//onLoaded: console.log("User Event Log");

//---Busy Indicator---//
delay.start();
}
//Component.onCompleted: {
//userEvent_busyInd.running = false
//}
}

State {
name: "USEREVENT"
PropertyChanges {target: mask; visible:true; z: 1;}
PropertyChanges {target: usereventlog_loader; sourceComponent:usereventcomponent;}
}

Component {
id: usereventcomponent
UserEventDialog {
id: userEventLog
}
}

Loader{
id: usereventlog_loader
width: 1300
height: 600
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
sourceComponent: null
z: 3
}

[anda_skoa]

I was thinking more along the lines of using the timer to stop the busy indicator instead of starting it.
Simulating the operation you will later on want to end the busy indicator when its done.

Cheers,
_

[jfinn88]

I see... let me mess around with it... thanks