Adding a ClientHandler like loading bar to a ServerClickHandler - google-apps-script

Question

I'm using the code below to run a a function that takes a while to load. My question is, without a lot of modification, is there an easy way of adding something like a clienthandler so that in the midst of running the function it says something along the lines of "Loading...?"
function doGet(e) {
var app = UiApp.createApplication().setTitle('New app');
var grid = app.createGrid(1, 2);
grid.setWidget(0, 0, app.createLabel('First Name + Last Name (Case Sensitive):'));
grid.setWidget(0, 1, app.createTextBox().setName('userName').setId('userName'));
var panel = app.createVerticalPanel();
panel.add(grid);
var buttonPanel = app.createHorizontalPanel();
var button = app.createButton('Submit');
var submitHandler = app.createServerClickHandler('submit')
submitHandler.addCallbackElement(grid);
button.addClickHandler(submitHandler);
buttonPanel.add(button);
var clearButton = app.createButton('Clear');
var clearHandler = app.createServerClickHandler('clear');
clearButton.addClickHandler(clearHandler);
buttonPanel.add(clearButton);
var statusLabel = app.createHTML("").setId('status').setVisible(false);
panel.add(statusLabel);
panel.add(buttonPanel);
app.add(panel);
return app;
};
function clear() {
var app = UiApp.getActiveApplication();
app.getElementById('userName').setValue('');
app.getElementById('status').setVisible(false)
return app;
};

Answer 1

Yes, indeed. That is what client handlers are for.
function doGet(e) {
var app = UiApp.createApplication().setTitle('New app');
var grid = app.createGrid(1, 2);
grid.setWidget(0, 0, app.createLabel('First Name + Last Name (Case Sensitive):'));
grid.setWidget(0, 1, app.createTextBox().setName('userName').setId('userName'));
/* Have the widget ready */
var statusLabel = app.createHTML("").setId('status').setVisible(false);
var panel = app.createVerticalPanel();
panel.add(grid);
var buttonPanel = app.createHorizontalPanel();
var button = app.createButton('Submit');
var submitHandler = app.createServerClickHandler('submit')
submitHandler.addCallbackElement(grid);
button.addClickHandler(submitHandler);
buttonPanel.add(button);
var clearButton = app.createButton('Clear');
var clearHandler = app.createServerClickHandler('clear');
/* Create the client handler */
var plswait = app.createClientHandler().forTargets(statusLabel).setText('Loading...');
clearButton.addClickHandler(clearHandler).addClickHandler(plswait);
buttonPanel.add(clearButton);
panel.add(statusLabel);
panel.add(buttonPanel);
app.add(panel);
return app;
};
function clear() {
var app = UiApp.getActiveApplication();
app.getElementById('userName').setValue('');
app.getElementById('status').setVisible(false).setText('');
return app;
};

Answer 2

It can be more pleasant if you add an image to your status label, here is an example using a transparent animated gif : (simply replace in Srik's code)
var statusLabel = ui.createHorizontalPanel().add(ui.createImage('https://dl.dropboxusercontent.com/u/211279/loading3T.gif'))
.add(ui.createHTML("Loading...")).setId('status').setVisible(false);// Label + animated gif, the text in the HTML widget can be there from the start.
Edit : just noticed something was missing in Srik's code... the clientHandler should go like this :
var plswait = app.createClientHandler().forTargets(statusLabel).setVisible(true);// and eventually setText(' blah blah...') if you didn't define/change it before/elsewhere
Note : now that you have a clientHandler you could also make use of it to setEnabled(false) the button that triggered it to avoid multiple clicks... simply add .forEventSource().setEnabled(false) to your clientHandler.