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