Creating an All-purpose Loading Indicator

Display an animated load indicator and fade out a control or group of controls while waiting for a response from the server. This works great for DataGrids, Images, and lots of other components.

Application - Source

I am working on a large project that has many different panels that populate with different kinds of data from HTTP requests... i.e. an image, or a "search" window that displays its results in a datagrid. Since they are all independent from each other, I wanted a way to disable a given control and show a load indicator while the application was waiting for a response. There could be one or several requests pending at the same time.

So I created a class called LoadCanvas which extends Canvas. The class is really simple. It has a loadImageSource property for the loading indicator swf (or image), and an isLoading property which tells it when to display the load indicator.

Here's an example app:

[kml_flashembed movie="http://www.rphelan.com/flex/LoadCanvas/LoadCanvasExample-nvs.swf" height="260" width="470" /]

If you are using cairngorm (which I highly recommend), then you can create a boolean variable in your model that is set to true in your command's execute function and back to false in the result and fault functions. Then you can bind the LoadCanvas's isLoading property to this variable. I sometimes also bind the enabled property of some of the controls, like the buttons in my example, to that variable so that the user can't make the same request several times in a row. Notice how the buttons are disabled while the request is pending.

Note:
If you are performing an operation where you can track the progress... then I recommend using a progress bar. Your users will appreciate the additional feedback.

Application - Source

Share: