Ionic + Capacitor

import { useEffect, useState } from "react";
import {
  IonPage, IonHeader, IonToolbar, IonTitle, IonContent,
  IonList, IonItem, IonLabel, IonSpinner,
} from "@ionic/react";

export default function Products() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading]   = useState(true);

  useEffect(() => {
    fetch("/api/products")
      .then(r => r.json())
      .then(d => { setProducts(d); setLoading(false); });
  }, []);

  return (
    <IonPage>
      <IonHeader><IonToolbar><IonTitle>Products</IonTitle></IonToolbar></IonHeader>
      <IonContent>
        {loading ? <IonSpinner /> : (
          <IonList>
            {products.map(p => (
              <IonItem key={p.id}>
                <IonLabel>{p.name} — ${p.price}</IonLabel>
              </IonItem>
            ))}
          </IonList>
        )}
      </IonContent>
    </IonPage>
  );
}