Visual feedback is an important aspect of a good user experience. During long operations, it’s crucial to make it clear that something is going on. Otherwise, your customer may click madly around the screen or even give up on your ‘broken’ app. Visualforce provides the actionStatus tag, which allows you to address this issue by providing a visual status indicator to the user. You can provide text, animated GIFs, progress indicators with translucent page overlays, or anything else you’d like to dream up.
A Simple Solution
It’s usually best to provide a simple, consistent implementation for actionStatus. When a user performs some task involving a server call, or “action” in a Visualforce tag, she’ll see a “busy” cursor and buttons on the page will be disabled.
CSS
The first step in this implementation is to define a CSS class we can use to invoke the browser’s “wait” cursor.
<style>
body.wait, body.wait * { cursor: wait !important; }
</style>Javascript
Next, we’ll need a couple of Javascript functions for starting and ending our wait indicator. We’re using jQuery to simplify the syntax a bit.
The first line of each of these functions modifies the ‘disabled’ attribute of any elements on our page where class=”button”. The next line adds/removes our “wait” class to the body element.
<script>
var busyCursorOn = function() {
j$('.button').attr("disabled", "disabled");
j$('body').addClass('wait');
};
var busyCursorOff = function() {
j$('.button').removeAttr('disabled');
j$('body').removeClass('wait');
};
</script>Apex:actionStatus
Next, create your actionStatus tag, referencing the Javascript functions above.
Note that all these elements (CSS style, Javascript functions, actionStatus tag) must be ‘visible’ to any of your Visualforce pages that want to use them. A simple way to accomplish this is to add them to a template or ‘included’ page.