Showing “In Progress” Animation While Waiting for Async Lightswitch HTML Client Operation

animated_progress

One visual element users have come to expect in modern web applications is an animated “please wait” or “in progress” indicator. You’ve probably noticed that the Lightswitch HTML Client provides this automatically for its long-running asynchronous data operations.

But what about your own code? Suppose you’ve added a button which asynchronously loads some data from the web, say via jQuery’s getJson() or ajax(). How do you get Lightswitch to display its progress animation until your async request is complete?

The Lightswitch HTML Client makes use of WinJS promise objects for its async operations. It surfaces a simple way for you to create your own promises – msls.promiseOperation(). It also provides a function call msls.showProgress() which takes a promise object as a parameter and shows the “in progress” animation until that promise completes.

You can find out more about WinJS promises here and here, but here’s some example code to get you started:

msls.showProgress(msls.promiseOperation(function (operation) {
    // your long running async code goes here
    // to help demonstrate, we'll use a 10 second delay
    setTimeout(function () {
        // whenever your async calls have completed, call operation.complete -
        // this will stop the showProgress animation
        operation.complete("we're done!");
    }, 10000);
}).then(function (result) {
    msls.showMessageBox(result);
}));