additional files

src/app/donate/donate.component.ts

@@ -1,32 +1,29 @@
-import { Component, inject, OnInit } from '@angular/core';
-import { NgFor } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { AsyncPipe, NgFor } from '@angular/common';
+import { map, Observable, startWith } from 'rxjs';
 
 import { TierService } from '../services/tier.service';
 import { Tier } from '../interfaces/tier';
 
+interface TiersState {
+  loading: boolean;
+  tiers: Tier[];
+}
+
 @Component({
   selector: 'app-donate',
   standalone: true,
-  imports: [NgFor],
+  imports: [AsyncPipe, NgFor],
   templateUrl: './donate.component.html',
   styleUrl: './donate.component.scss',
 })
-export class DonateComponent implements OnInit {
+export class DonateComponent {
   private tierService = inject(TierService);
 
-  tiers: Tier[] = [];
-  loading = true;
-
-  ngOnInit(): void {
-    this.tierService.getTiers().subscribe({
-      next: (data) => {
-        this.tiers = data;
-        this.loading = false;
-      },
-      error: () => {
-        this.loading = false;
-        this.tiers = [];
-      },
-    });
-  }
+  /** Async pipe drives the template — guarantees change detection on every emission. */
+  readonly tiers$: Observable<TiersState> =
+    this.tierService.getTiers().pipe(
+      map((tiers) => ({ loading: false, tiers })),
+      startWith({ loading: true, tiers: [] }),
+    );
 }