The thing to know is that this @defer feature exists to help to display large components and page with lots of components. In few cases components can be so heavy that pages are slow to display and users have to wait to interact with the page main features. With @defer, we can load only the most important features and then load others (or not even load them, when not useful). @defer is a new way to lazy load components.

@error is not catching your observable error, it’s not it’s intent. It catches defered component loading issue. So your error is never handled. See https://github.com/angular/angular/issues/53535

An other issue will happen when you’ll refresh displayed data. Once @defer has loaded the component, it won’t display loading/placeholder again, even when the condition gets back to false.

In my opinion, @defer is not the correct tool for your usecase. @defer release announcement has made developpers (at least me) dream too much. @defer seems rarely useful to me, because I’ve never seen a website so heavy, nor so badely designed, that it could bring value.

There are some proposals to add a new workflow to handle observable loading/error here, but it doesn’t exist yet: https://github.com/angular/angular/issues/18509

I’ve made a loading example without the use of @defer, but using @if/@else, which may help you. It works with angular>=18.1 due to the use of @let

html example to load a list

<div style="border: 1px  solid lightgrey; padding: 5px; display:flex; flex-direction: column; gap: 15px">
  <div>
    <button (click)="onClickLoadFruits()">Load fruits</button>
    <button (click)="onClickEmptyFruits()">Load empty fruits</button>
  </div>
  @let fruits = fruits$ | async;
  @if (fruits$ === undefined) {
    Placeholder until fruit retrieval launch
  } @else if (fruits === null) {
    <ngx-skeleton-loader count="4" [theme]="{height: '16px', marginBottom:'0px'}" />
    <ngx-skeleton-loader count="4" [theme]="{height: '16px', marginBottom:'0px'}" />
  } @else if (fruits.length === 0) {
    no fruit found
  } @else {
    @for (fruit of fruits; track fruit.name) {
      <div class="flex flex-col">
        <span>Fruit: {{ fruit?.name }}</span>
        <span>Color: {{ fruit?.color }}</span>
        <span>Blablabla blablabla blablabla blablabla</span>
        <span>Blablabla blablabla blablabla blablabla</span>
      </div>
    }
  }
</div>

html example to load an object

<div style="border: 1px  solid lightgrey; padding: 5px; display:flex; flex-direction: column; gap: 15px">
  <div>
    <button (click)="onClickLoadFruit()">Load a fruit</button>
    <button (click)="onClickLoadNotFoundFruit()">Load not found fruit</button>
  </div>
  @let fruit = fruit$ | async;
  @if (fruit$ === undefined) {
    Placeholder until fruits retrieval launch
  } @else if (fruit === null) {
    <ngx-skeleton-loader count="4" [theme]="{height: '16px', marginBottom:'0'}" />
  } @else if (fruit | isEmptyObject) {
    no fruit found
  } @else {
    <div class="flex flex-col">
      <span>Fruit: {{ fruit?.name }}</span>
      <span>Color: {{ fruit?.color }}</span>
      <span>Blablabla blablabla blablabla blablabla</span>
      <span>Blablabla blablabla blablabla blablabla</span>
    </div>
  }
</div>

component ts

export class DemoComponent {
  protected fruit$: Observable<Fruit | EmptyObject> | undefined;
  protected fruits$: Observable<Fruit[]> | undefined;

  protected onClickLoadFruit(): void {
    this.fruit$ = of({ name: 'banana', color: 'yellow' }).pipe(delay(5000));
  }

  protected onClickLoadNotFoundFruit(): void {
    this.fruit$ = of({}).pipe(delay(5000));
  }

  protected onClickLoadFruits(): void {
    this.fruits$ = of([
      { name: 'banana', color: 'yellow' },
      { name: 'strawberry', color: 'red' },
    ]).pipe(delay(5000));
  }

  protected onClickEmptyFruits(): void {
    this.fruits$ = of([]).pipe(delay(5000));
  }
}

type Fruit = { name: string; color: string };

empty object pipe, which is used for single object check

@Pipe({
  name: 'isEmptyObject',
  standalone: true,
})
export class IsEmptyObjectPipe implements PipeTransform {
  public transform(value: unknown): boolean {
    return typeof value === 'object' && value !== null && Object.keys(value).length === 0;
  }
}

and EmptyObject alias type, which is the type of {}

export type EmptyObject = Record<string, never>;