Loader Fallback.Docs - Bit

import { LoaderFallback } from './loader-fallback';

Safely render a component, with a default fallback when it is undefined.
The LoaderFallback component also provides a grace period, where it shows a loader before switching to the default.
Set timeout = 0 to skip the grace period.

Example usage:

tsx

// as a hook:
const safeTarget = useFallback(Target && <Target />, <DefaultComponent />, { timeout: 10000, loader: <Loader /> });

// as a component:
<LoaderFallback Target={Target} DefaultComponent={DefaultComponent} timeout={10000} loader={Loader}>

Logic is as follows:

when component is defined -> render it
when the initial value of the component is undefined -> show the default immediately
when the component changes to be undefined -> show Loader for x seconds
1. then, after x seconds - show the default. {/* Try it out:

tsx

function Example() {
  return (
    <LoaderFallback
      Target={RegularComponent} // comment this out
      DefaultComponent={Fallback}
      timeout={2000}
    />
  );

  function RegularComponent() {
    return <div>regular component</div>;
  }

  function Fallback() {
    return <div>this shows when component is undefined</div>;
  }
}
``` */}