style: Provide Visual Feedback to Users Upon Button Click to Indicate Processing Time #13553 #14137
Conversation
i am trying to solve Processing button
|
@murtaza030 is attempting to deploy a commit to the cal Team on Vercel. A member of the Team first needs to authorize it. |
github-actions
bot
added
Low priority
|
Thank you for following the naming conventions! 🙏 Feel free to join our discord and post your PR link. |
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (03/19/24)1 reviewer was added to this PR based on Keith Williams's automation. "Add community label" took an action on this PR • (03/19/24)1 label was added to this PR based on Keith Williams's automation. |
📦 Next.js Bundle Analysis for @calcom/webThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
| {mutation.isPending ? ( | ||
| <div className="cursor-wait px-[220px] py-2 "> Processing...</div> | ||
| ) : ( | ||
| <> | ||
| {t("next_step_text")} | ||
| <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" /> | ||
| </> | ||
| )} |
There was a problem hiding this comment.
you just have to use loading property in Button as mentioned by peer here #14028 (comment)
There was a problem hiding this comment.
yes sir "use loading={mutaiton.isPending}" i am only using this property not use "usestate"
There was a problem hiding this comment.
i am working on these things
There was a problem hiding this comment.
@murtaza030 you have to pass loading property to Button and don't use this
{mutation.isPending ? (
) : (
<>
{t("next_step_text")}
</>
)}
There was a problem hiding this comment.
never mind i have fixed it now
Udit-takkar
changed the title
|
|
|
@murtaza030 could you please sign CLA #14137 (comment) ? |
|
yes i am signup github CLA |
What does this PR do?
This pull request enhances the user experience by adding visual feedback to the button component. Specifically, it modifies the button to display a "Processing..." message when clicked, providing users with immediate feedback that their action is being processed. This change addresses the issue of user uncertainty after interacting with certain buttons, ensuring a smoother and more intuitive user experience.
Summary of Change:
Modified the button component to include a visual feedback mechanism indicating processing status. This change ensures that users receive immediate feedback upon clicking the button.
Fixes #13553
Desktop.2024.03.19.-.10.47.32.04.mp4
Type of change
{mutation.isPending ? (
) : (
<>
{t("next_step_text")}
</>
)}
How should this be tested?
i am only yarn dev for testing ui of button
Mandatory Tasks