Load more

import { useState } from "react"
import { Checkbox } from "@/components/ui/checkbox"
import { LoadMore } from "@/components/ui/load-more"

const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

export function LoadMoreDemo() {
  const [rows, setRows] = useState(12);
  const [failNext, setFailNext] = useState(false);
  return (
    <div className="grid w-full max-w-md gap-3">
      <label className="flex items-center gap-2 text-sm"><Checkbox checked={failNext} onChange={(event) => setFailNext(event.target.checked)} />Fail the next page</label>
      <div className="h-[340px] overflow-y-auto rounded-[14px] shadow-[inset_0_0_0_1px_var(--border)]" tabIndex={0} role="region" aria-label="Transactions">
        <ul className="grid">
          {Array.from({ length: rows }, (_, index) => (
            <li key={index} className="flex justify-between border-b border-border px-4 py-3 text-sm">
              <span>Card payment {String(index + 1).padStart(3, "0")}</span>
              <span className="font-mono text-muted-foreground">−€{(12 + ((index * 37) % 180)).toFixed(2)}</span>
            </li>
          ))}
        </ul>
        <LoadMore
          hasMore={rows < 48}
          onLoad={async () => {
            await wait(900);
            if (failNext) {
              setFailNext(false);
              throw new Error("Network");
            }
            setRows((n) => n + 12);
          }}
          endLabel="That is every transaction this month"
        />
      </div>
    </div>
  );
}