preceived-performance.component.ts

import { Component, computed, effect, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';
import { toSignal } from '@angular/core/rxjs-interop';

@Component({
  template: `
    @if (loading()) {
      <div>Loading...</div>
    } @else {
      @for (item of combined()![0]; track item) {
        <div>{{ item }}</div>
      }
      @for (dropdown of dropdowns(); track dropdown) {
        <select>
          @for (option of dropdown; track option) {
            <option [value]="option">{{ option }}</option>
          }
        </select>
      }
    }
  `
})
export class SlowComponent {
  private http = inject(HttpClient);

  private combined = toSignal(forkJoin([
    this.http.get<string[]>('/api/data'),
    this.http.get<string[]>('/api/dropdown1'),
    this.http.get<string[]>('/api/dropdown2')
  ]), { initialValue: null });

  loading = signal(true);
  dropdowns = computed(() => {
    const result = this.combined();
    return result ? [result[1], result[2]] : [[], []];
  });

  constructor() {
    effect(() => {
      this.loading.set(this.combined() === null);
    });
  }
}