Hello everyone, this is my first react app. On first mount loading animation is visible until quote is not fetched. But how to show loading animation if quote is visible and next button is clicked to fetch new quote. In between animation is done to hide the quote, but for a few milliseconds screen is blank. At that time i want to show loading animation.
Vishwa Bhat
Technology Enthusiast
Don't fill too much of animations, it distracts the user from information. The usual purpose of loading animation is to indicate that the corresponding action is in progress. When you open the app, application load is in progress hence you occupy whole screen to load as an indication. Applying the same analogy for next quote request action, applying loading animation on the next button makes sense instead of applying on whole screen.
The above approach serves your intent of avoiding blank screen because you'll replace the new quote with the older ones. And, the purpose of the loader animation is served too. If needed, you apply simplistic fade animation on quote change(content) with animation duration not more than 150ms.
Cheers!