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 );
...
}