Lazy with Preload

lazy_with_preload.ts

/* eslint-disable @typescript-eslint/no-explicit-any */
import { ComponentType, lazy } from "react";

/**
 * Returns both the component render function and a prefetch function
 *
 * Example:
 *
 * ```ts
 * import { lazyWithPreload } from "~/utils/lazy_with_preload";
 * const LargeComponent = lazyWithPreload(()=>import("./LargeComponent"));
 * const Page = ()=> {
 *   const [showLargeComponent, setShowLargeComponent] = useState(false)
 *   const onHoverBtn = () => LazyComponent.preload()
 *   return (
 *     <div>
 *       <button onClick={openLargeComponent} onMouseOver={onHoverBtn}>Open</button>
 *       { showLargeComponent ? <LargeComponent.render/> : null}
 *     </div>
 *   )
 * }
 * ```
 */
export function lazyWithPreload<C extends ComponentType<any>>(
  factory: () => Promise<{ default: C }>
) {
  const Component = lazy(factory);
  return { render: Component, preload: factory };
}