Delay rendering fallback component to avoid "Flash Of Loading Component"

🚀 Feature Proposal

Avoiding Flash Of Loading Component

Provide an option similar to delay option of react-loadable that sets a number of milliseconds to wait before showing the fallback component. The fallback component, thus will only be rendered if loading takes sufficiently long time. This avoids The Flash of Loading Component.

Additionally, consider to provide a sane default value for this new option. For example, it is 200 ms for react-loadable. For backwards compatibility, consider setting the default to 0 (no delay).

This is similar in nature, but simpler than what is requested in #203 (which itself reminds me of “router events” in Next.js)

Motivation

Flash Of Loading Component, similarly to Flash Of Unstyled Component leads to sub-optimal user experience.

It is best described in the documentation of react-loadable:

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.

Source: react-loadable#avoiding-flash-of-loading-component

Additionally to aesthetic side of things, I hypothesize that the unnecessary loading and rendering of the fallback component, in cases where it is only shown for a split second, adds a small performance hit on every new page, without conveying any useful information to the user (it is only visible for a split second).

Example

The interface of the feature could be implemented by providing an additional option for loadable() function:

const OtherComponent = loadable(() => import('./OtherComponent'), {
  delay: 250, // in milliseconds
  fallback: <div>Loading...</div>, // only shown if loading takes more than 250 ms
})

Alternatively, fallback could optionally accept an object with both options:

const OtherComponent = loadable(() => import('./OtherComponent'), { 
  fallback: {
    delay: 250, // in milliseconds
    component: <div>Loading...</div>, // only shown if loading takes more than 250 ms
})

For more advanced use-case, the state of the delay could be exposed to the fallback component so that it would decide for itself what to render (similar to react-loadable):

function Loading(props) {
   if (props.pastDelay) {
    return <div>Loading...</div>;
  } else {
    return null;
  }
}

const OtherComponent = loadable(() => import('./OtherComponent'), { 
  fallback: {
    delay: 250, // in milliseconds
    component: Loading, // if loading takes more than 250 ms, `props.pastDelay` becomes `true`
})

In all cases, when user navigates to the OtherComponent, if OtherComponent manages to load faster than in 250 ms, no fallback (<div>Loading...</div>) is rendered. Otherwise, <div>Loading...</div> starts rendering after 250 ms elapsed and until fallback is ready.

Pitch

Why does this feature belong in the Loadable Component ecosystem:

This feature aligns with the best practices of user experience design and is present in some of the popular competing solutions (e.g.react-loadable)

[ivan-aksamentov]

@neoziro It turns out this thing with p-min-delay described in the link above is not what I need. Can we re-open?

The difference:

• p-min-delay forces fallback to be shown for a given amount of time, regardless of whether the main component loads fast or slow.
• What I want is the exact opposite: prevent fallback from showing up at all on the fast client (client that loads the main component before a given time threshold).

Is this something that is doable with external tools as well? Otherwise, can we pass a boolean flag (or even the elapsed time or some sort of a progress metric) to the <strike>main</strike> loading component similar to how react-loadable does? (3rd code snippet in my first message) What do you think?

[Samushel]

For the <ALoadingIndicatorWithADelay /> component, is it something like:

const LoadingIndicatorWithDelay = () => {
	const delay = 200; // 200ms
	const [showLoadingIndicator, setLoadingIndicatorVisibility] = useState(false);
	setTimeout(() => {
		setLoadingIndicatorVisibility(true);
	}, delay);

	if(showLoadingIndicator) {
		return <LoadingIndicator />;
	}

	return null;
};

While this solution works, it will introduce a memory leak and React will show this error:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. 
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

This is how it should be done following the React docs example: Effects with cleanup

const LoadingIndicatorWithDelay = () => {
  const delay = 200; // 200ms
  const [showLoadingIndicator, setLoadingIndicatorVisibility] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setLoadingIndicatorVisibility(true), delay);

    // this will clear Timeout when component unmont like in willComponentUnmount
    return () => {
      clearTimeout(timer);
    };
  });

  return showLoadingIndicator ? <LoadingIndicator /> : null;
};