feat(frontend): standardize loading states and extract a base DataTable

[nourshoreibah]

Summary

Two related bits of cleanup that both came out of "make loading states nicer":

• One base table. Expenses, reports, donors and donations each rebuilt the same furniture by hand — green header row, colgroup, empty state — and had drifted (header weight 700 vs 600 vs unset). They now render through DataTable, where columns are data ({ key, header, width, align, cell, skeleton }) and optional selection supplies the checkbox column reports needs for bulk delete. ExpensesTable becomes a thin wrapper that just fixes the expense column set, so its props are unchanged.
• One set of loading affordances. No more <p>Loading…</p>. Spinner is the primitive, LoadingState is the centred block for a region, and Skeleton / TableSkeletonRows are the table treatment.

Tables keep their header, column widths and page height while loading, with jittered bar widths, a staggered shimmer and a pill-shaped placeholder where the status badge goes. Everything else gets a centred spinner; the label is kept as the accessible name rather than visible text, so getByRole('status', { name: … }) still identifies it.

The animations live in globals.css (.branch-spinner, .branch-skeleton) rather than in the components, so there is a single timing curve, FullPageSpinner can still render before Chakra is mounted, and both honour prefers-reduced-motion.

Two things that came along for the ride: donors and donations dropped their copy-pasted duplicate of Pagination in favour of the existing component, and rows that act like buttons are now keyboard-reachable (a tr with onClick previously could not be focused).

Conventions are documented in apps/frontend/AGENTS.md, per the repo rule about keeping those current.

Notes for reviewers

• Header cells now use <h5> everywhere, matching the design system's heading scale. Reports, donors and donations headers get slightly bolder as a result — that is the intended standardization, not an accident.
• The remaining loading call sites (StaffPicker, ProjectFormModal, the custom Button) live on an in-flight feature branch and are not on main yet, so they are deliberately out of scope here.

Test plan

• npm run typecheck
• npm run lint
• npm run test — 29 suites / 292 passing, including new DataTable and LoadingState suites covering the skeleton, empty state, selection and keyboard row activation
• npm run build (static export)
• Manually verified the table skeleton and page spinner against the local mock API with a throttled fetch

Made with Cursor

[github-actions]

🌿 Preview environment — failed ❌ to update. See the workflow logs.

[github-actions]

🌿 Preview environment torn down 🧹 — the stack for this PR has been destroyed.

[github-actions]

🌿 ⏳ Creating preview environment… (logs)

[github-actions]

🌿 Preview environment — ready ✅

Open: https://d3nmtjoh6ir9ym.cloudfront.net/pr-320/
API: https://rzwd20me73.execute-api.us-east-2.amazonaws.com/prod

Shared RDS + Cognito (prod data); DB migrations are not applied here — if this PR adds a migration, endpoints using the new columns will fail until it merges. New commits update this environment in place — a note is posted here on each update. Remove the test-environment label or close the PR to tear it down.

[github-actions]

🌿 Preview environment torn down 🧹 — the stack for this PR has been destroyed.