Displaying a Busy Cursor During Apex Operations

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

In my experience with Salesforce thus far, I've found it 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.

<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>

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.

Apex:actionStatus

Next, create your actionStatus tag, referencing the Javascript functions above.

<apex:actionStatus id="busyCursor" onStart="busyCursorOn()" onStop="busyCursorOff()"/>

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.

Apply

Finally, add your new status indicator to any commandButton, commandLink, or actionFunction in your project. I like to do a project search for "action=", add apply it everywhere. You never know when a server operation may take a while, so there's no sense in trying to pick and choose where to supply an indicator.

<apex:commandButton action="{!save}" value="{!$Label.site.save}" status="busyCursor" />

And that's it. You're done. A clean and simple way to provide feedback to the user during server operations.