Skip to content
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

Fix cursor stealing & display loading for AddressInput #738

Merged
merged 10 commits into from
Feb 25, 2024

Conversation

technophile-04
Copy link
Collaborator

@technophile-04 technophile-04 commented Feb 23, 2024

Description

Reason for #710:

How AddressInput internally works:

  • We have debounce time of 500ms for the input field.
  • Actually we have isEns util which when true (carletex.e is valid ens), the hook useEnsAddress makes a request for corresponding ENS address
  • We are disabling the input filed when the request is in progress.
  • Input focus looses when its is disabled (it does not regain focus when enabled again)

Cause of the issue:

  1. Since we have 500ms debounce time, as soon as you write carletex.e (valid ens), the request is made and input is disabled.So if there is delay >= 500ms b/w "e" & "t" of "eth" then input looses focus(and our key strokes are not registered).

Solution:

  1. Increase the debounce time to 900ms (So we give user a bit more window to type in "eth").
  2. Incase the user is slow typer, We refocus the input after trying to resolve the ens address.

Some minor tweak to imporve UX:

  1. Show "Resolving..." indicator when request is in progress(To just tell user the keystrokes won't be registered and some background process is going on)
  2. Re focusing the input if there was error, success etc, So that user can continue typing if there was typo or wants to update to new value.

Demo:

Screen.Recording.2024-02-23.at.1.31.48.PM.mov

Closes #710

@carletex
Copy link
Member

Love this @technophile-04 Thank you!!

Left a couple a comments

Copy link
Collaborator

@Pabl0cks Pabl0cks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

GJ @technophile-04, feels like magic!! Works pretty well in mobile too.

I feel a bit old saying that, but 900 seems ok to me 😅 Approving but will test again if you tweak the visual feedback while resolving.

@rin-st
Copy link
Collaborator

rin-st commented Feb 23, 2024

Thanks Shiv, gj!

Found one bug and it worked for every address I entered first time. Refocus is somewhere where ens domain ends (it seems the same length)

2024-02-23.18.53.48.mov

@technophile-04
Copy link
Collaborator Author

Thanks all for the test's and review !!

voting for 500 since I think there are much less slow typers than fast typers between our users
The main problem was the input not focusing after resolving (for slow typers), and this is fixed in this PR.

Yup I agree reverted it back to 500 at 15cfdbf

Found one bug and it worked for every address I entered first time

Thanks ! Fixed at c2f1cf3

The 2nd option with the circle + bar will look great I think

Going with this for showing loading, reason : This option really nicely handles layout shifting as compared to other option.

Screen.Recording.2024-02-24.at.1.47.19.AM.mov

Also the Ens Avatar loading until now it used to come, go, and then pop up again with the image

Copy link
Collaborator

@Pabl0cks Pabl0cks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good to me! Awesome job @technophile-04 🙌

@technophile-04
Copy link
Collaborator Author

Merging this 🙌 Tysm All !

@technophile-04 technophile-04 merged commit a482feb into main Feb 25, 2024
1 check passed
@technophile-04 technophile-04 deleted the fix/addressInput branch February 25, 2024 11:18
@technophile-04 technophile-04 mentioned this pull request Feb 26, 2024
@github-actions github-actions bot mentioned this pull request Feb 27, 2024
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.

Slow typing on <AddressInput> causes cursor stealing
4 participants