UI/UX: Design loading/pending UX for the Create Bond and Trust Lookup actions

[Baskarayelu]

Description

The Button component supports an isLoading spinner state, but neither handleCreate in Bond.tsx nor handleLookup in TrustScore.tsx uses it — both fire an instant toast with no pending feedback. Real wallet signing and on-chain lookups take seconds, during which the user needs clear "submitting/looking up" feedback and protection from double-submit. We need to design the in-flight UX for these two primary actions (button loading copy, disabled inputs, optional progress hint).

Requirements and context

• UI/UX scope only — loading-state interaction spec; no real async logic required to demonstrate.
• Reference src/components/Button.tsx (isLoading/aria-busy), src/pages/Bond.tsx, src/pages/TrustScore.tsx.
• Define button loading labels ("Creating bond…", "Looking up…"), input disabling, and double-submit prevention.
• Specify when to fall back to a LoadingSkeleton vs an inline button spinner.

Suggested execution

• Branch: uiux/action-loading-states.
• Wire Button isLoading into both actions; add loading copy.
• Deliver: in-flight redlines and a spinner-vs-skeleton decision note.

Test and commit

• Visual QA at 375px and 1280px during simulated load.
• npm run build and npm run lint pass.
• a11y checks: aria-busy set, loading announced to AT, no focus loss.

Example commit message

feat(uiux): add loading/pending UX for create-bond and trust-lookup

Guidelines

• Clear documentation of loading copy and behavior.
• Design consistency with Button isLoading.
• Timeframe: 96 hours