STEW: indicating progress

Retrieving data from the Internet might take some time. Provide users with visual feedback on how the operation is progressing. STEW displays a progress indicator during data retrieval from Twitter.

The progress indicator is implemented in the main.html file.

<!-- LOADER -->
<div id="loader_popup" class="popup hidden">
	<table class="popup_window">
		<tr><td> </td></tr>
		<tr class="background">
			<td class="loader">
				<div class="title">LOADING</div>
				<img src="images/loader.gif" alt="Loader">
				<div class="subtitle">Please wait while we process data...</div>
		    	</td>
		</tr>                
		<tr><td> </td></tr>
	</table>
</div>

The layout of the loader pop up screen is defined in the CSS files.

Figure: STEW progress indicator

To display the screen when a request is made to the Twitter service and to hide it when a response is received, add the following function to TwitterService.js:

TwitterService.prototype.showProgress = function( show ) {
	if (this.progressId) {
		if (show == null) 
			show = true;
	
		Helper.show( this.progressId, show );			
		if (!show) {
			// If we hide the progress bar, set to null here so we
			// don't do that twice and overwrite some other manager's
			// progress bar.
			this.progressId = null;
		}
	}
}

Update the functions that get triggered when a request is issued and when a response has been processed, as listed in the code snippet below:

TwitterService.prototype._doRequest = function( url, type ) {
	this.showProgress();
	...
}

TwitterService.prototype.handleSuccessResponse = function( arg ) {
	this.showProgress( false );
	...
}

TwitterService.prototype.handleErrorResponse = function( status ) {
	this.showProgress( false );
	...
}