Skip to content

Button: use isPending instead of isLoading #982

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 25, 2024
Merged

Button: use isPending instead of isLoading #982

merged 7 commits into from
Nov 25, 2024

Conversation

alexanbj
Copy link
Contributor

@alexanbj alexanbj commented Nov 21, 2024

  • use isPending in RAC for better screen reader support for buttons that are in a loading/pending state
  • Deprecate isLoading in favor of isPending (this aligns with both RAC's naming convention and React's useActionState hook)
  • Use text transparency for the button content instead of state/layoutEffect to maintain the button's size while in a pending state.

Note that when the button is in a pendingstate it can't be interacted with. This means you don't have to disable a button to prevent multiple submissions etc. Note that our Button component also can render a RAC Link, which technically doesn't support isPending. It will render to look the same as a pending button, but interactions won't be disabled. This is a tradeoff we'll have to make..

Copy link

changeset-bot bot commented Nov 21, 2024

🦋 Changeset detected

Latest commit: 8d1c81f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@obosbbl/grunnmuren-react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

netlify bot commented Nov 21, 2024

Deploy Preview for obos-grunnmuren ready!

Name Link
🔨 Latest commit 8d1c81f
🔍 Latest deploy log https://app.netlify.com/sites/obos-grunnmuren/deploys/67445d96fc2d710008ddab99
😎 Deploy Preview https://deploy-preview-982--obos-grunnmuren.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@alexanbj alexanbj changed the title Button: isPending instead of isLoading Button: use isPending instead of isLoading Nov 22, 2024
* deprecate isLoading in favor of RAC's isPending
* CSS only solution to keep the button width while in a pending state
@alexanbj alexanbj marked this pull request as ready for review November 25, 2024 11:05
@alexanbj alexanbj requested review from a team, oscarcarlstrom and aulonm November 25, 2024 11:05
alexanbj and others added 2 commits November 25, 2024 12:07
Co-authored-by: Oscar Carlström <oscar.carlstrom@gmail.com>
@alexanbj alexanbj merged commit 3cb2008 into main Nov 25, 2024
5 checks passed
@alexanbj alexanbj deleted the ispending branch November 25, 2024 14:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants