Best practice to use app.showLoading(), app.hideLoading() before App is ready and during view transitions

[Adrian]

Hi,

If i run the code below, the error is
Error: The mobile application instance is not fully instantiated. Please consider activating loading in the application init event handler.
var app=new kendo.mobile.Application($(document.body), {
 skin: "flat",
 init: function() {
            console.log("Kendo UI Mobile application is ready");
        }
});
app.showLoading();
    setTimeout(function() {
        app.hideLoading();
    }, 10000);

And if i do it like this below, it will work.
var app=new kendo.mobile.Application($(document.body), {
 skin: "flat",
 init: function() {
            console.log("Kendo UI Mobile application is ready");
            app.showLoading();
    setTimeout(function() {
        app.hideLoading();
    }, 10000);
        }
});
So don't understand how to use app.showLoading for init and during views.
Can you advise what is the best practice to use the app.showLoading(),     app.hideLoading();

1. When my phonegap/html page first loads while the mobile page is loading and populating data into datasource to be bind to listview. So I would prefer the user to see the loading icon instead of a blank screen/page.
2. During transition from a 1st view to 2nd view before the data appears in the listview of the 2nd view.

Thanks.

[Petyo]

Hello Teo,

Please take a look at this (relatively old) thread, which describes an approach for the initial application loading.

Regards,
Petyo
Telerik

[Adrian]

It a good example on how to show a splashscreen before the App is ready.
Thanks.