mhnpd / react-loader-spinner

Collection sets of a spinners for async operations for ReactJS
https://mhnpd.github.io/react-loader-spinner/
MIT License
984 stars 145 forks source link

New prop delay: to avoid flash loading spinner #63

Closed jmhungdev closed 2 years ago

jmhungdev commented 4 years ago

inspired by react-loadable:

Avoiding Flash Of Loading Component Sometimes components load really quickly (<200ms) and the loading screen only quickly flashes on the screen.

A number of user studies have proven that this causes users to perceive things taking longer than they really have. If you don't show anything, users perceive it as being faster.

So your loading component will also get a pastDelay prop which will only be true once the component has taken longer to load than a set delay.


function Loading(props) {
  if (props.error) {
    return <div>Error! <button onClick={ props.retry }>Retry</button></div>;
  } else if (props.pastDelay) {
    return <div>Loading...</div>;
  } else {
    return null;
  }
}
jmhungdev commented 4 years ago

ok I will try working on it. thanks! :)