isPending() state isn't reset to false if the tracked value hasn't changed.
Closed this issue · 4 comments
Hi! I have a simple implementation of the hook where I track the value of an input and do something after a delay if the value has changed. The value of the input is used somewhere else on the screen. So I use the isPending()
method to display an animation to inform the user that their input is being registered, before they can see any change on the screen. Basic UX improvement.
Everything is fine except for the case where you start typing something only to erase it and leave the input's value unchanged. Then the isPending()
value stays true
. Here are a video showing it in action and a snippet of my code. Note that the two <span />
at the end are meant to show that the issue doesn't come from the implementation inside my <Input />
component. The isPending()
remains "frozen" even in the component where the useDebounce()
is declared.
Any help would be greatly appreciated, thanks!
Enregistrement.de.l.ecran.2024-07-17.200947.mp4
// more irrelevant things here...
const [input, setInput] = useState(p.value.text)
const [debouncedValue, bouncing] = useDebounce(input, 500)
return (
<InputWrapper>
<Label htmlFor={`${p.label}-${id}`} children={p.label} />
<RadioButtons
small
name={`textAlign-${id}`}
buttons={textAlignRadio}
onChange={handleTextAlign}
/>
<Input
textareaRef={areaRef}
isTextarea
noLabelTag
name={p.label + id}
className="leading-normal font-xsmall weight-medium"
dots={bouncing.isPending()}
defaultValue={p.value.text}
onChange={e => setInput(e.target.value)}
/>
{bouncing.isPending() && (
<span className="text-micro">Bouncing</span>
)}
{!bouncing.isPending() && (
<span className="text-micro">Not Bouncing</span>
)}
</InputWrapper>
)
Hey @kapsule-studio
thanks for your feedback.
I'll take a look at it in upcoming week
use-debounce@10.0.2
Thanks for working on it. Unfortunately, there is still a misbehavior 😅 Now, if I type something and quickly erase it but keep typing, when the value
gets back to its initial state, isPending()
is set to false even though I'm still typing.
It is subtle but you can notice it: value
starts as Account
. If I type ...
, erase it and keep typing, right when the value
goes from Account.
to Account
, which was the initial state, isPending()
is set to false whereas I am still typing. You can tell by the animation stopping when the value
gets back to its initial state just before starting again If I'm still typing. I expect it to stop only when the debounce
delay is passed, no matter the current value
.
Note: I seem to be one of the few to be disturbed by that. The project I'm working on won't be finished before a long time.
Don't bother yourself with that issue if you have better to do. Enjoy your holiday, family, hobbies, I'll be just fine.