Add ability to delay lightmapper start

src/core/Lightmap.tsx

@@ -94,6 +94,7 @@ const LegacySuspenseFallbackIntercept: React.FC<{
 
 const LightmapMain: React.FC<
   WorkbenchSettings & {
+    disabled?: boolean;
     legacySuspense?: boolean;
     children: React.ReactElement;
   }
@@ -104,6 +105,11 @@ const LightmapMain: React.FC<
 
   const requestWork = useWorkRequest();
 
+  // disabled prop can start out true and become false, but afterwards we ignore it
+  const enabledRef = useRef(!props.disabled);
+  enabledRef.current = enabledRef.current || !props.disabled;
+  const allowStart = enabledRef.current;
+
   // debug reference to workbench for intermediate display
   const [workbench, setWorkbench] = useState<Workbench | null>(null);
 
@@ -115,6 +121,11 @@ const LightmapMain: React.FC<
   const legacySuspenseWaitPromiseRef = useRef<Promise<void> | null>(null);
   const sceneRef = useRef<unknown>();
   useLayoutEffect(() => {
+    // ignore if nothing to do yet
+    if (!allowStart) {
+      return;
+    }
+
     // await until wrapped scene is loaded, if suspense was triggered
     const sceneReadyPromise =
       legacySuspenseWaitPromiseRef.current || Promise.resolve();
@@ -143,7 +154,7 @@ const LightmapMain: React.FC<
       });
 
     setProgress({ promise, isComplete: false });
-  }, [requestWork]);
+  }, [allowStart, requestWork]);
 
   const debugInfo = useMemo(
     () =>
@@ -193,8 +204,9 @@ const LightmapMain: React.FC<
 
 // set "legacySuspense" to correctly wait for content load in legacy Suspense mode
 export type LightmapProps = WorkbenchSettings & {
-  workPerFrame?: number;
+  disabled?: boolean;
   legacySuspense?: boolean;
+  workPerFrame?: number;
 };
 
 const Lightmap = React.forwardRef<

src/stories/delay.stories.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls } from '@react-three/drei';
+import * as THREE from 'three';
+
+import Lightmap from '../core/Lightmap';
+import Spinner from './Spinner';
+import { DebugOverlayRenderer, DebugOverlayWidgets } from './DebugOverlayScene';
+
+export default {
+  title: 'Delay via disabled flag',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean',
+        displayName: 'disabled'
+      }
+    }
+  },
+  decorators: [(story) => <div style={{ height: '100vh' }}>{story()}</div>]
+} as Meta;
+
+type StoryWithArgs = Story<{ disabled: boolean }>;
+
+export const Main: StoryWithArgs = ({ disabled }) => (
+  <Canvas
+    camera={{ position: [-6, -4, 2], up: [0, 0, 1] }}
+    shadows
+    onCreated={({ gl }) => {
+      gl.toneMapping = THREE.ACESFilmicToneMapping;
+      gl.toneMappingExposure = 0.9;
+
+      gl.outputEncoding = THREE.sRGBEncoding;
+    }}
+  >
+    <DebugOverlayRenderer>
+      <React.Suspense fallback={<Spinner />}>
+        <Lightmap disabled={disabled} ao texelsPerUnit={3} workPerFrame={4}>
+          <mesh position={[0, 0, 0]} castShadow receiveShadow>
+            <boxBufferGeometry attach="geometry" args={[3, 3, 1]} />
+            <meshLambertMaterial attach="material" color="#60ff80" />
+          </mesh>
+
+          <mesh position={[0, 0, 1.8]} castShadow receiveShadow>
+            <boxBufferGeometry attach="geometry" args={[2, 2, 2]} />
+            <meshLambertMaterial attach="material" color="#ff8040" />
+          </mesh>
+
+          <pointLight color="#808080" position={[-3, 2, 5]} castShadow />
+          <ambientLight color="#808080" />
+
+          <DebugOverlayWidgets />
+        </Lightmap>
+      </React.Suspense>
+    </DebugOverlayRenderer>
+
+    <OrbitControls
+      enableDamping
+      dampingFactor={0.1}
+      rotateSpeed={0.5}
+      target={new THREE.Vector3(0, 0, 1)}
+    />
+  </Canvas>
+);
+Main.args = {
+  disabled: true
+};