typescript 40 lines · 8 steps

Tracking HTTP loading state in Angular

A signal-backed counter and an interceptor combine to expose a global isLoading flag driven by in-flight requests.

Explained by highlit

Angular Intermediate signals http-interceptor reference-counting dependency-injection opt-out

1import { Injectable, signal, computed } from '@angular/core';
2import {
3  HttpInterceptorFn,
4  HttpContextToken,
5  HttpContext,
6} from '@angular/common/http';
7import { inject } from '@angular/core';
8import { finalize } from 'rxjs';
9 
10export const SKIP_LOADING = new HttpContextToken<boolean>(() => false);
11 
12export function skipLoading(): HttpContext {
13  return new HttpContext().set(SKIP_LOADING, true);
14}
15 
16@Injectable({ providedIn: 'root' })
17export class LoadingService {
18  private readonly activeRequests = signal(0);
19 
20  readonly isLoading = computed(() => this.activeRequests() > 0);
21 
22  start(): void {
23    this.activeRequests.update((count) => count + 1);
24  }
25 
26  stop(): void {
27    this.activeRequests.update((count) => Math.max(0, count - 1));
28  }
29}
30 
31export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
32  if (req.context.get(SKIP_LOADING)) {
33    return next(req);
34  }
35 
36  const loading = inject(LoadingService);
37  loading.start();
38 
39  return next(req).pipe(finalize(() => loading.stop()));
40};

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Reference counting handles overlapping requests so the loading flag stays accurate under concurrency.
2A functional interceptor is the natural place to start and stop shared state around every request.
3An HttpContextToken lets individual requests opt out of cross-cutting behavior without touching the interceptor's core logic.

Related explainers

java

@Component
@Order(20)
public class ProductSearchIndexRunner implements ApplicationRunner {

Rebuilding a search index at Spring startup

startup-hook batching streaming

Intermediate 8 steps

typescript

export class PriorityQueue<T> {
  private heap: Array<{ value: T; priority: number }> = [];
 
  get size(): number {

Building a binary-heap priority queue in TypeScript

binary-heap priority-queue generics

Intermediate 9 steps

python

from datetime import datetime
from fastapi import APIRouter, Depends, HTTPException, status
from pydantic import BaseModel, ConfigDict, EmailStr
from sqlalchemy.orm import Session

Building a users router in FastAPI

routing serialization dependency-injection

Intermediate 7 steps

typescript

type Event = Record<string, unknown>;
 
interface BatcherOptions {
  endpoint: string;

Batching analytics events in TypeScript

batching buffering async

Intermediate 8 steps

java

@Service
public class OrderCheckoutService {
 
    private final OrderRepository orderRepository;

How @Transactional guards a Spring checkout

dependency-injection transactions atomicity

Intermediate 6 steps

typescript

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route, Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { Observable, of, timer } from 'rxjs';