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);
}));
  • Allen Adams

    I couldn’t get this sample code to do anything other than show a pop-up with the text “Profile Photo–OK” in it. Another potential issue is that async calls do not necessarily have to report back any progress info.
    This was a sticky issue for me for my home screen which has 2 ajax calls, one for the user permissions and another for the application username. With only 2 buttons on the main screen, I would frequently get null reference exceptions if the user tried to navigate to any other screen that needed the permissions info and username before the ajax call finished.
    I was able to work around this by programming a conditional method that would fire only if the permissions and username were undefined to then display a popup showing a jQuery progress bar animation while a setInterval function counts off 3 seconds (the typical time it took for the ajax call to complete) before checking for the permissions and username data again in order to proceed on to the next screen.

    • Jewel Lambert

      Hi Allen, I’ve changed the sample code a bit to hopefully make it a clearer demonstration – now it’s using a 10 second timer before calling operation.complete so it should take long enough for the animation to appear.

  • Svetoslav80

    Thanks :)