additional files

src/app/donate/donate.component.html

@@ -17,23 +17,25 @@
     <!-- Donation tiers -->
     <div class="donate-tiers">
       <h3>Choose Your Level of Support</h3>
-      @if (loading) {
-        <div class="schedule-loading">Loading tiers&hellip;</div>
-      } @else if (tiers.length === 0) {
-        <div class="schedule-empty">No donation tiers available. Check back soon!</div>
-      } @else {
-        <div class="tiers-grid">
-          <div class="tier-card" *ngFor="let tier of tiers">
-            <div class="tier-icon">{{ tier.icon }}</div>
-            <div class="tier-amount">${{ tier.amount }}</div>
-            <div class="tier-period">per month</div>
-            <h4>{{ tier.name }}</h4>
-            <ul class="tier-benefits">
-              <li *ngFor="let benefit of tier.benefits">{{ benefit }}</li>
-            </ul>
-            <a href="#" class="btn btn-tier">Select {{ tier.name }}</a>
+      @if (tiers$ | async; as state) {
+        @if (state.loading) {
+          <div class="schedule-loading">Loading tiers&hellip;</div>
+        } @else if (state.tiers.length === 0) {
+          <div class="schedule-empty">No donation tiers available. Check back soon!</div>
+        } @else {
+          <div class="tiers-grid">
+            <div class="tier-card" *ngFor="let tier of state.tiers">
+              <div class="tier-icon">{{ tier.icon }}</div>
+              <div class="tier-amount">${{ tier.amount }}</div>
+              <div class="tier-period">per month</div>
+              <h4>{{ tier.name }}</h4>
+              <ul class="tier-benefits">
+                <li *ngFor="let benefit of tier.benefits">{{ benefit }}</li>
+              </ul>
+              <a href="#" class="btn btn-tier">Select {{ tier.name }}</a>
+            </div>
           </div>
-        </div>
+        }
       }
     </div>
 

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: [] }),
+    );
 }