// All our imports...
// Here, we use React's `lazy` to defer loading of all this component's code.
const CreateUserModal = lazy(() => import('./CreateUserModal');
// ...

function Dashboard() {
  // State for controlling when our modal should be visible.
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Create user</button>
      {isOpen && (
        // Wrapping our deferred component in this `Suspense`
        // is what allows it to not be rendered until its code
        // has been fetched. The `fallback` prop is what gets
        // rendered in its place in the meantime.
        <Suspense fallback={<p>Loading...</p>}>
          <CreateUserModal />
        </Suspense>
      )}
    </>
  )
}

<button onClick={() => setIsOpen(true)}>
  {isOpen && (
    <Suspense fallback={<Spinner />}>
      <CreateUserModal close={() => setIsOpen(false)} />
    </Suspense>
  )}{' '}
  Create User
</Button>

// All our imports...
// Here, set up our module path resolver. It's essentially
// the same thing as before, except without React's `lazy`.
const loadUserModal = () => await('./CreateUserModal');
// Declare the variable we'll eventually load our component into.
let CreateUserModal;

function Dashboard() {
  // State for controlling when our modal should be visible.
  const [isOpen, setIsOpen] = useState(false);
  // State for keeping track of our component loading.
  const [isLoading, setIsLoading] = useState(false);

  async function openUserModal() {
    // If we've already loaded our component, just open & return.
    if (CreateUserModal) {
      setIsOpen(true);
      return;
    }

    // Else, we set our loading state and wait for the module to load.
    setIsLoading(true);
    const module = await loadUserModal();
    CreateUserModal = module.default; // assuming it's a default export.

    // And finally we open the modal and turn our loading off!
    setIsOpen(true);
    setIsLoading(false);
  }

  return (
    <>
      <button onClick={openUserModal}>
        // Here we simply show the spinner when we're 
        // loading. No more `Suspense` boundary!
        {isLoading && <Spinner />} Create User
      </button>
      // Maybe a bunch of other code. We can put it anywhere now!
      {isOpen && <CreateUserModal />}
    </>
  )
}

// Our hook takes an array of module path resolvers
function useLazyLoad(resolvers) {
  const [isLoading, setIsLoading] = useState(false);
  const result = useRef();

  // Always return array with same length as the number of components so the
  // hook's consumer can immediately destructure, for example:
  // const [loading, load, [Comp1, Comp2]] = useLazyLoad([lazyComp1, lazyComp2]);
  const placeholderResult = useRef(Array(resolvers.length));

  // This is the function we return for the consumer to
  // call and initiate loading of the component.
  // It's wrapped in a `useCallback` in case they also
  // want to pass it to a memoized component or otherwise
  // include it as a dependency.
  const load = useCallback(async () => {
    // Do nothing if the modules have already been loaded.
    if (result.current) return;

    try {
      setIsLoading(true);

      // Resolve each module.
      const modulePromises = resolvers.map((resolver) => resolver());
      const modules = await Promise.all(modulePromises);

      // If the module has a default export, return it directly,
      // Otherwise, return the entire object and let consumer handle it.
      result.current = modules.map((module) =>
        'default' in module ? module.default : module
      );
    } catch (error) {
      // Do something with the error...
    } finally {
      setIsLoading(false);
    }
  }, []);

  return [isLoading, load, result.current || placeholderResult.current];
}

// All our imports...
import useLazyLoad from './useLazyLoad';
const lazyUserModal = () => await('./CreateUserModal');

function Dashboard() {
  const [isOpen, setIsOpen] = useState(false);
  // We call our hook here, passing it the resolver we defined
  // above wrapped in an array. Notice we immediately
  // destructure the result but that's completely optional!
  const [isLoading, load, [CreateUserModal]] = useLazyLoad([lazyUserModal]);

  async function openUserModal() {
    // Here we call the `load` function returned from our hook.
    await load();
    // And open the modal!
    setIsOpen(true);
  }

  // Nothing else changes!
  return (
    <>
      <button onClick={openUserModal}>
        {isLoading && <Spinner />} Create User
      </button>
      // ...
      {isOpen && <CreateUserModal />}
    </>
  )
}

// All our other imports...
const CreateUserModal = lazy(() => import('../components/CreateUserModal'));

// We'll flip this after our component loads to skip
// subsequent, unnecessary calls to `startTranstion`.
let isLoaded = false;

function Dashboard() {
  const [isOpen, setIsOpen] = useState(false);
  // Call the transition hook. `isPending` tells us the
  // state the transition is in (just like our `isLoading`),
  // and `startTransition` initiates the transition (like our `load`).
  const [isPending, startTransition] = useTransition();

  function openCreateUserModal() {
    // If we've already loaded the code, simply open the modal.
    if (isLoaded) {
      setIsOpen(true);
      return;
    }
    // Else, tell React that we consider setting opening the modal
    // a transition, which you can think of as deprioritizing
    // and as such won't occur until after the component has loaded.
    startTransition(() => setIsOpen(true));
    isLoaded = true;
  }

  // This time, just a change in variable name!
  return (
    <>
      <button onClick={openUserModal}>
        {isPending && <Spinner />} Create User
      </button>
      // ...
      {isOpen && <CreateUserModal />}
    </>
  )
}