How to show a “busy” user interface status cue after pushing a button in Visualforce

How to show a "busy" visual cue after someone pushes a button.

I’ve known for a while that Visualforce has support for carrying out an action after a button is pushed – such as updating a user interface component with a “busy” sign for example. For example, considering the following:

After hitting “Filter”, I would a visual cue to appear indicating that the processing is occurring – for example something like this:

And of course I want that cue to go away at some stage. This is particularly useful if you’re using Ajax to update the page. It turns out it’s pretty simple to do. Here’s my entire Visualforce page:

Notice the actionStatus tag. I provide some text to display when it’s in a start mode, and when it’s stopped (blank in my case), and I identify it (myStatus). The remarkable thing is that to get this to work, all I have to do is add one attribute to the commandButton, namely status="myStatus". Everything else is taken care of automatically. As you can see from the reREnder attribute, when you push this button, the go() method is called, and the status is updated. When the method returns, the blank stop text is shown, and the table is updated with some Ajax. Cool!

For completeness, here is my controller code (it uses the Mileage object from the workbook):