Stop Using One loading Boolean for Your Entire Angular Feature

A single loading flag looks simple — until one screen has initial load, refresh, save, delete, export, and background requests happening independently.

A lot of Angular features begin with something like this:

@Injectable()
export class OrderStore {
  readonly orders = signal<Order[]>([]);
  readonly loading = signal(false);
}

Then loading orders is straightforward:

load() {
  this.loading.set(true);

this.repository
    .getOrders()
    .pipe(
      finalize(() =>
        this.loading.set(false)
      )
    )
    .subscribe(orders => {
      this.orders.set(orders);
    });
}

Perfectly reasonable.

Then the feature grows.

Users can:

Load orders
Refresh orders
Save an order
Delete an order
Export orders
Load another page
Refresh one row

Not a Member? Read for FREE here.

And every operation starts doing this:

this.loading.set(true);

followed by:

this.loading.set(false);