Improve SayCheese component with TypeScript types and better comments

[Copilot]

The SayCheese component has been improved with TypeScript type annotations and clearer comments while maintaining the original timing logic that ensures assets load properly before snapshots.

Changes

• .storybook/Setup.tsx:
  • Added TypeScript type annotations: { pauseAt?: number } for type safety
  • Removed redundant useEffect import, using React.useEffect instead
  • Updated comments for better clarity
  • Maintained the original setTimeout(5000) logic to ensure assets load before frameloop pause

The component continues to work as originally designed: the scene renders normally for 5 seconds allowing assets (fonts, textures, etc.) to load via React Suspense before pausing the frameloop at a consistent animation time.

Before:

function SayCheese({ pauseAt = 3000 }) {
  const { clock, advance, setFrameloop, invalidate, gl, scene, camera } = useThree()
  
  useEffect(() => {
    const timer = setTimeout(() => {
      setFrameloop('never')
      advance(timestamp, true)
      // ...
    }, 5000)
    
    return () => clearTimeout(timer)
  }, [pauseAt, clock, advance, invalidate, gl, scene, camera, setFrameloop])
  
  return null
}

After:

function SayCheese({ pauseAt = 3000 }: { pauseAt?: number }) {
  const { clock, advance, setFrameloop, invalidate, gl, scene, camera } = useThree()
  
  React.useEffect(() => {
    // Wait for assets to load before pausing the frameloop
    const timer = setTimeout(() => {
      setFrameloop('never')
      advance(timestamp, true)
      // ...
    }, 5000) // Let the scene render normally first to allow Suspense to resolve
    
    return () => clearTimeout(timer)
  }, [pauseAt, clock, advance, invalidate, gl, scene, camera, setFrameloop])
  
  return null
}

Benefits

• Type-safe with proper TypeScript annotations
• Cleaner imports (no redundant useEffect)
• Better documentation with improved comments
• Ensures Text3D and other Suspense-dependent components appear correctly in snapshots
• Maintains proven asset loading behavior

Original prompt

On Setup.tsx:57-57, i was using setTimeout to let Chromatic wait 5s (to load assets, like fonts... etc) before taking the snapshot

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
drei	Ready	Preview, Comment	Jan 6, 2026 5:27pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[abernier]

@copilot remove Saycheese, should be useless

[Copilot]

@copilot remove Saycheese, should be useless

Done. Removed the SayCheese component and all its imports. Now relying entirely on chromatic.delay: 5000 parameter in preview.tsx. (16a9be0)

[abernier]

@copilot wait... not that easy... we still need to setFrameloop('never') and advance() at a given time before taking the snapshot so they are stable (animation is always paused at the same time)

[Copilot]

@copilot wait... not that easy... we still need to setFrameloop('never') and advance() at a given time before taking the snapshot so they are stable (animation is always paused at the same time)

You're right! Restored the SayCheese component but removed the setTimeout. Now it works as:

1. chromatic.delay: 5000 - Chromatic waits 5s for assets to load
2. SayCheese immediately calls setFrameloop('never') and advance(pauseAt) - animations pause at a consistent time (3s by default)

This ensures stable, reproducible snapshots. (0632ef7)

[abernier]

@copilot wait if "immediately" freeze the scene, font is prob not loaded and Text3d will not appear...

[Copilot]

@copilot wait if "immediately" freeze the scene, font is prob not loaded and Text3d will not appear...

Good catch! Restored the setTimeout so the scene renders normally for 5s, allowing fonts and other assets to load via Suspense before freezing. Removed the chromatic.delay parameter since it's redundant - SayCheese's setTimeout handles the timing. (52689d5)

[abernier]

i asked https://discord.com/channels/486522875931656193/1106615915321229372/1458148972253286451 to avoid setTimeout...

do you know @copilot ?

[Copilot]

i asked https://discord.com/channels/486522875931656193/110661591...

The ideal approach would be using Chromatic's play function or lifecycle hooks, but for React Three Fiber's custom frameloop, we need a different solution.

Options:

1. Use chromatic.delay in preview.tsx + expose a callback from R3F when ready
2. Use chromatic.pauseAnimationAtEnd - but this doesn't work with R3F's frameloop
3. Keep setTimeout - it's the most reliable way to ensure assets load before pausing

The setTimeout is actually the correct approach here because:

• React Suspense needs active rendering to resolve
• We need to wait for fonts/textures to load
• We need to pause at a consistent animation time

Unless there's a R3F-specific hook that fires when Suspense resolves, setTimeout is the pragmatic solution. Would you like me to explore adding a callback mechanism to detect when assets are loaded?