@bisoladev
Posted
Great job! I would suggest adding a loading state to help the users be more patient during the latency period of 2 seconds. Other than that, I think it was an awesome work!
Marked as helpful
@digitalherding
Posted
@bisoladev Love your idea!
@bisoladev
Posted
Thank you! @thenihilistdev
@YariMorcus
Posted
Hi @bisoladev,
First of all, it seems like I owe you an apology (so hereby!). I completely forgot to answer your feedback after not having the time to respond to it immediately.
The loading state is indeed a good idea I haven't thought about. My idea is then to not disable the button for 2 seconds, but to show the loading spinner (in the card) right after the user presses the button within those 2 seconds.
What do you think about this?
PS: Thank you for the reminder (the notification of you liking this solution) @thenihilistdev
@digitalherding
Posted
@YariMorcus I love that idea! Can't wait to see it if you update it!
@YariMorcus
Posted
@thenihilistdev,
I put it on my todo list so I will definitely update it (always striving for the best result 😀).
@bisoladev
Posted
Hi! Totally understand ....Yeah that works...will check back to see your implementation of it ..good job!😁@YariMorcus
@YariMorcus
Posted
@bisoladev @thenihilistdev
I updated the solution with the loading spinner. If the user now presses the button within 2 seconds, the loading spinner will render. I did decide to keep the button disabled because of two reasons:
- It otherwise introduced a bug.
- I personally found it more clear to disable it instead of it being enabled.
The disabled button will (of course) be enabled again after those seconds (with the new advice).
I do have to admit that I had some trouble implementing it in code (I did had an idea of what I had to do in my head).
Update: I just found a bug only applicable to Firefox. Somehow Firefox gets stuck in setTimeout and therefore keeps showing the loading spinner. I am currently looking for a solution but have not found one yet.
@YariMorcus
Posted
@bisoladev @thenihilistdev,
I managed to fix the bug in Firefox by adding { cache: 'no-cache' } in the configuration object of fetch(). Somehow Firefox (and Firefox only) kept caching the previous advice even if it was well over 2 seconds. This caused the loading spinner to rerender and create a loop of API calls.
I am still not sure why this only happens in Firefox but hey I got it working haha.
@bisoladev
Posted
Wow awesome! There is always something new to learn on every challenge ..Going to test mine on firefox also ..Thank you@YariMorcus
