Jet provides HTTP interceptors to enhance the user experience during API calls.
progressBarInterceptor
Automatically displays and manages progress bars during HTTP requests based on the request method.
Type Signature
export const progressBarInterceptor: HttpInterceptorFn = (req, next)
Parameters
The outgoing HTTP request
The next handler in the interceptor chain
Return Value
Returns Observable<HttpEvent<unknown>> - The HTTP event stream with progress bar side effects.
Behavior
The interceptor determines which progress bar to display based on the HTTP method:
Query Operations (GET, HEAD, OPTIONS)
- Calls
progressBarService.showQueryProgressBar()
- Typically used for data fetching operations
- Shows a query-specific progress indicator
Mutation Operations (POST, PUT, PATCH, DELETE)
- Calls
progressBarService.showIndeterminateProgressBar()
- Used for data modification operations
- Shows an indeterminate progress indicator
Cleanup
- Always calls
progressBarService.hideProgressBar() when the request completes
- Uses RxJS
finalize() operator to ensure the progress bar is hidden regardless of success or failure
Usage
The interceptor is registered in the application configuration:
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { progressBarInterceptor } from '@jet/interceptors/progress-bar/progress-bar.interceptor';
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(
withInterceptors([progressBarInterceptor])
),
// other providers...
],
};
HttpClient:
import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';
export class UserService {
private http = inject(HttpClient);
getUsers() {
// Progress bar automatically shown for GET request
return this.http.get('/api/users');
}
createUser(user: User) {
// Indeterminate progress bar automatically shown for POST request
return this.http.post('/api/users', user);
}
}
Flow Diagram
Integration with ProgressBarService
The interceptor depends on the ProgressBarService which manages the visual display:
// Triggered by GET, HEAD, OPTIONS requests
progressBarService.showQueryProgressBar();
// Typically shows a determinate or query-specific indicator
Source Code
import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { ProgressBarService } from '@jet/services/progress-bar/progress-bar.service';
import { finalize } from 'rxjs';
export const progressBarInterceptor: HttpInterceptorFn = (req, next) => {
const progressBarService = inject(ProgressBarService);
const method = req.method;
if (['GET', 'HEAD', 'OPTIONS'].includes(method)) {
progressBarService.showQueryProgressBar();
} else if (['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)) {
progressBarService.showIndeterminateProgressBar();
}
return next(req).pipe(
finalize(() => {
progressBarService.hideProgressBar();
}),
);
};
Benefits
Automatic UX Enhancement
No manual progress bar management needed in individual services or components
Method-Aware Display
Different progress indicators for queries vs. mutations provide better user feedback
Guaranteed Cleanup
Uses RxJS finalize() to ensure progress bar is always hidden, even on errors
Zero Configuration
Works automatically once registered, no per-request setup required
Error Handling
The interceptor uses the finalize() operator, which ensures the progress bar is hidden regardless of whether the request succeeds or fails:
return next(req).pipe(
finalize(() => {
// This runs on success, error, or cancellation
progressBarService.hideProgressBar();
}),
);
Dependencies
The interceptor uses Angular’s functional interceptor approach and injects dependencies using the inject() function:
ProgressBarService - Manages the visual display of progress indicators- RxJS
finalize operator - Ensures cleanup occurs in all scenarios