setBusy not executing - sapui5

Question

I have setBusy exucuting elsewhere in my application, but why not here....
This is reading in my site details, so without the setbusy the page looks like it's doing nothing.
_onRouteMatched: function (oEvent) {
//initialise display
var view = this.getView();
view.setBusy(true);
view.byId("shopInput").setValue("");
view.byId("effectiveDateFrom").setValue("");
view.byId("shop24Hrs").setSelected(false);
view.byId("shopClosed").setSelected(false);
view.byId("createNext").setVisible(false);
view.byId("createSubmit").setVisible(false);
//view.byId("createSave").setVisible(false);
// initialise the store view model
var oModel = this.getModel("site");
this.getModel().read("/SiteSet", {
success: function (oData) {
var oSiteData = oModel.getData();
oSiteData.Sites = oData.results;
oModel.setData(oSiteData);
}.bind(this)
});
view.setBusy(false);
},
Any Ideas?

Answer 1

Actually your code sets busy but resets it right away. The read method is asynchronous. You have to reset busy inside the success callback function (it could be a good idea to reset it in an error callback too).
_onRouteMatched: function (oEvent) {
//initialise display
var view = this.getView();
view.setBusy(true);
view.byId("shopInput").setValue("");
view.byId("effectiveDateFrom").setValue("");
view.byId("shop24Hrs").setSelected(false);
view.byId("shopClosed").setSelected(false);
view.byId("createNext").setVisible(false);
view.byId("createSubmit").setVisible(false);
//view.byId("createSave").setVisible(false);
// initialise the store view model
var oModel = this.getModel("site");
this.getModel().read("/SiteSet", {
success: function (oData) {
var oSiteData = oModel.getData();
oSiteData.Sites = oData.results;
oModel.setData(oSiteData);
view.setBusy(false);
}.bind(this),
error: function(){
view.setBusy(false);
}
});
},
Generally when using setBusy() you should mind this points:
Per default the busy indicator is displayed 1000 milliseconds after setBusy(true). There is a setBusyIndicatorDelay() function to control that delay (can be set to 0).
The busy indicator is always created deferred (using setTimeout()). JavaScript is singlethreaded. So if your code after calling setBusy() blocks, the busy indicator will not be displayed until your code has finished and the control flow is returned to the event loop. So don't try this: setBusy(true); model.loadData("/data", false /*synchronous*/); setBusy(false);

Answer 2

You can create a busy dialog object and then use open and close function in the success call back and error call back respectively. Please have a look at the code:-
_onRouteMatched: function (oEvent) {
//initialise display
var busyDialog= new sap.m.BusyDialog;
view.byId("shopInput").setValue("");
view.byId("effectiveDateFrom").setValue("");
view.byId("shop24Hrs").setSelected(false);
view.byId("shopClosed").setSelected(false);
view.byId("createNext").setVisible(false);
view.byId("createSubmit").setVisible(false);
//view.byId("createSave").setVisible(false);
// initialise the store view model
var oModel = this.getModel("site");
busyDialog.open();
this.getModel().read("/SiteSet", {
success: function (oData) {
busyDialog.close();
var oSiteData = oModel.getData();
oSiteData.Sites = oData.results;
oModel.setData(oSiteData);
}.bind(this)
});
busyDialog.close();
},