Add loading states to buttons with async actions
Maintainers usually reply within 1 day
@abhiramvsmg is already working on this.
Since Jul 22, 2026.
Assessment
This issue has not been assessed yet.
Description
Buttons that trigger async actions (form submissions, API calls) should show loading states to provide user feedback.
Examples:
- Sign in/Sign up buttons
- Session booking confirmation
- Profile update submit
- Goal creation
Requirements:
- Use a loading spinner (Phosphor Icons:
CircleNotchwithanimate-spin) - Disable button while loading
- Change button text to "Loading..." or keep original text with spinner
Example pattern:
<Button disabled={isLoading}>
{isLoading && <CircleNotch className="animate-spin mr-2" size={16} />}
{isLoading ? "Saving..." : "Save"}
</Button>
Files to update:
- Sign in/up forms in
src/app/(marketing)/ - Booking forms in
src/app/(platform)/ - Settings forms in
src/app/(platform)/settings/
Acceptance criteria:
- Loading states added to all primary action buttons
- Buttons disabled while loading
- Visual feedback (spinner or text change)
- Tested in dev environment
- Dominant language
- TypeScript
- Stars
- 3
- Forks
- 6
- Avg merge
- 13h 29m
- Merged PRs (30d)
- 56
Getting set up
Starts the project's dev container in your browser, under your own GitHub account.
- Ships a Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from grasshopper-protocol/grsshppr
-
bug UX
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
grasshopper-protocol/grsshppr#209 ·
Maintainers usually reply within 1 day
-
Add tests for utils.ts cn() functionPossibly taken @yogesh201sits claimed this 6 days ago. Opengood first issue testing
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
grasshopper-protocol/grsshppr#81 · 1 comment · 1 assignee ·
Maintainers usually reply within 1 day
-
code quality documentation good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 66/100
grasshopper-protocol/grsshppr#78 ·
Maintainers usually reply within 1 day
-
a11y documentation good first issue UI
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
grasshopper-protocol/grsshppr#77 ·
Maintainers usually reply within 1 day
-
good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
grasshopper-protocol/grsshppr#46 ·
Maintainers usually reply within 1 day
All issues in grasshopper-protocol/grsshppr
Similar issues
-
agent-reported area/react bug
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Nimblesite/SharpLsp#510 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
Maintainers usually reply within 1 day
-
backend refactor
Difficulty 2/5 1-3 hours Newbie friendliness 73/100
NIAEFEUP/tts#927 · 1 comment · 1 reaction ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
callstackincubator/react-native-harness#296 ·
Maintainers usually reply within 1 day