lazy load dev overlay

.changeset/shy-tables-approve.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/start": patch
+---
+
+lazy load dev overlay

packages/start/src/shared/clientOnly.tsx

@@ -1,5 +1,5 @@
 // @refresh skip
-import type { Component, ComponentProps, JSX } from "solid-js";
+import type { Component, ComponentProps, JSX, Setter } from "solid-js";
 import { createMemo, createSignal, onMount, sharedConfig, splitProps, untrack } from "solid-js";
 import { isServer } from "solid-js/web";
 
@@ -11,16 +11,18 @@ import { isServer } from "solid-js/web";
 export default function clientOnly<T extends Component<any>>(
   fn: () => Promise<{
     default: T;
-  }>
+  }>,
+  options: { lazy?: boolean } = {}
 ) {
   if (isServer) return (props: ComponentProps<T> & { fallback?: JSX.Element }) => props.fallback;
 
   const [comp, setComp] = createSignal<T>();
-  fn().then(m => setComp(() => m.default));
+  !options.lazy && load(fn, setComp);
   return (props: ComponentProps<T>) => {
     let Comp: T | undefined;
     let m: boolean;
     const [, rest] = splitProps(props, ["fallback"]);
+    options.lazy && load(fn, setComp);
     if ((Comp = comp()) && !sharedConfig.context) return Comp(rest);
     const [mounted, setMounted] = createSignal(!sharedConfig.context);
     onMount(() => setMounted(true));
@@ -31,3 +33,12 @@ export default function clientOnly<T extends Component<any>>(
     );
   };
 }
+
+function load<T>(
+  fn: () => Promise<{
+    default: T;
+  }>,
+  setComp: Setter<T>
+) {
+  fn().then(m => setComp(() => m.default));
+}

packages/start/src/shared/dev-overlay/index.tsx

@@ -20,7 +20,7 @@ const DevOverlayDialog =
     ? () => {
         return <></>;
       }
-    : /* #__PURE__ */ clientOnly(() => import("./DevOverlayDialog"));
+    : /* #__PURE__ */ clientOnly(() => import("./DevOverlayDialog"), { lazy: true });
 
 export function DevOverlay(props: DevOverlayProps): JSX.Element {
   const [errors, setErrors] = createSignal<unknown[]>([]);