Indicator for all partial refreshes

Sometimes partial updates take a while. To make users aware of updates happening, I made a small JS object that automatically shows a dojox.widget.Standby over the area being updated. Initially I thought that it would be too much, showing the mask over every refreshed area. So far, I quite like the effect.

The app isn't in production yet, so I don't know how users will react, but hopefully they will appreciate being made aware of that things are happening.

To load the object, put this in a JavaScript library (client side)

dojo.addOnLoad(function(){ new StandbyWidget(); });

The default background color is bright yellow. To override, simply put a hex string in the "constructor" call.

dojo.addOnLoad(function(){ new StandbyWidget( '#555'); }); // Dark grey

To use the code snippet below, you also need the partial event hijacker

var StandbyWidget = function( backgroundColor ){
 dojo.require( 'dojox.widget.Standby' );
 this.widget = new dojox.widget.Standby();
 this.widget.attr( 'color', backgroundColor || '#ffe' );
 
 document.body.appendChild( this.widget.domNode );
 this.widget.startup();
 
 dojo.subscribe( 'partialrefresh-init', this, function( method, form, targetId ){
  if( targetId && targetId !== '@none' ){ this.show( targetId ); }
 });
 
 dojo.subscribe( 'partialrefresh-complete', this, function( method, form, targetId ){
  if( targetId && targetId !== '@none' ){ this.hide(); }
 });
 
 dojo.subscribe( 'partialrefresh-error', this, function( method, form, targetId ){
  if( targetId && targetId !== '@none' ){ this.hide(); }
 });
}

StandbyWidget.prototype = {
 show: function( targetId ){
  this.widget.attr( 'target', targetId );
  this.widget.show();  
 },
 hide: function(){  
  this.widget.hide();
 }
}