Implement debounced validation for username and email fields ✅

[ManasRanjanSahoo11]

🚀 Adding SignupForm with Smart Debounced Validation!

🎯 What's New?

I am adding debounced user-friendly validation for usernames and email addresses. Say goodbye to unnecessary API calls and hello to a smoother, more responsive user experience!

✨ Key Improvements:

• 🕐 Smart Timing: Validation kicks in after 300ms of user inactivity, reducing server load and improving responsiveness.
• 🔄 Instant Reset: The timer resets with each keystroke, ensuring accurate validation of the final input.
• 👀 Visual Feedback: Users now see a "Validating..." indicator, keeping them informed of behind-the-scenes action.
• 🛠 Custom Hook Magic: Introducing our sleek useDebounce hook for efficient state management.
• 🧹 Cleaner Dependencies: Removed lodash for a leaner, meaner codebase.

🔍 Technical Details:

• Implemented a custom useDebounce hook to manage validation timing.
• Updated validateUsername and validateEmail functions to leverage debounced logic.
• A Promise-based structure was added to handle asynchronous validation smoothly.

📊 Expected Impact:

• Significantly reduced the number of API calls during form completion.
• Enhanced user experience with responsive and intuitive validation feedback.
• Improved overall performance and efficiency of the signup process.

🧪 Testing Notes:

Please verify the following scenarios:

1. Rapid typing in username/email fields should not trigger immediate validation.
2. Validation should occur 300ms after stopping typing.
3. "Validating..." indicator should appear and disappear appropriately.
4. Existing validation error messages should still display correctly.

[welcome[bot]]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

[release-com[bot]]

Release Environments

This Environment is provided by Release, learn more! To see the status of the Environment click on Environment Status below.

• p5.js-web-editor
  • app-ted24c6.release.editor.p5js.org/
  • preview-ted24c6.release.editor.p5js.org/

:wrench:Environment Status : https://app.release.com/public/Processing%20Foundation/env-88d15b1663

[raclim]

Thank you for submitting this! After giving this a look, although this handles the debounce properly, there's a few issues and places for improvement here!

Since the debounce logic for the username and email fields are pretty similar, I think this could be refactored to have some consolidation there. There also seems to be a few linting and styling issues. For example, besides the ones caught by the linter, we'd also prefer to keep as much as the original file as possible, and would probably want to revert areas like line 150-151 for readability.

After doing some functional testing, there also seems to be inconsistent changes to the size of the input fields when a user tries to type into it. This might be due to the addition of the "Validating..." text underneath it, and might require some CSS changes there.

Due to some of the issues described I don't think we can merge this in at the moment. I'm going to close this for now, but please feel free to reopen this PR or create a new one with any additional changes!