Form race condition #12
Conversation
WalkthroughThe recent update to the Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| (!validCommitHash || selectedCommitHash === "") && | ||
| "opacity-25 hover:bg-emerald-600", | ||
| )} | ||
| disabled={!validCommitHash} | ||
| disabled={!validCommitHash || selectedCommitHash === ""} |
There was a problem hiding this comment.
Consider adding a loading state indicator to improve user experience during commit hash validation.
+ const [isLoading, setIsLoading] = useState(false);
...
<button
type="submit"
className={clsx(
"mt-4 inline-flex items-center rounded-md bg-emerald-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600",
(!validCommitHash || selectedCommitHash === "" || isLoading) &&
"opacity-25 hover:bg-emerald-600",
)}
disabled={!validCommitHash || selectedCommitHash === "" || isLoading}
>
{isLoading ? "Loading..." : "Start Query"}
</button>This change introduces a loading state that is activated during the commit hash validation process. It not only disables the "Start Query" button but also changes its label to "Loading..." to provide immediate feedback to the user that an operation is in progress. This enhancement aligns with the PR's objective of improving UX by preventing premature form submissions and clarifying to the user when the form is ready for submission.
Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| (!validCommitHash || selectedCommitHash === "") && | |
| "opacity-25 hover:bg-emerald-600", | |
| )} | |
| disabled={!validCommitHash} | |
| disabled={!validCommitHash || selectedCommitHash === ""} | |
| (!validCommitHash || selectedCommitHash === "" || isLoading) && | |
| "opacity-25 hover:bg-emerald-600", | |
| )} | |
| disabled={!validCommitHash || selectedCommitHash === "" || isLoading} |
There was a problem hiding this comment.
this is a good suggestion, and maybe something i'll take up down the road
There was a problem hiding this comment.
@eriktaubeneck, I understand and respect your decision to consider the loading state indicator suggestion for future implementation. Should you need any assistance or have any questions when you decide to take it up, feel free to reach out. I'm here to help with this or any other improvements you're considering. Happy coding!
If you found this review helpful, would you consider giving us a shout-out on X?
Thank you for using CodeRabbit!
you always find funny bugs when using in flight wifi... turns out the commit hash doesn't populate until the octokit api is called, and that can have some delay. POSTing a form without it raises and error, so we can just disable that until it's loaded.
note: we could have also had the
validCommitHashinitialize asfalsebut then we get bad UX, because invalid hash warnings then appear on page load and then disappear when the API loads the commit hash.Summary by CodeRabbit