Cursor rule

1---
2alwaysApply: false
3---
4 
5## Conditional Module Loading
6 
7Load large data or modules only when a feature is activated.
8 
9**Example (lazy-load animation frames):**
10 
11```tsx
12function AnimationPlayer({ enabled, setEnabled }: { enabled: boolean; setEnabled: React.Dispatch<React.SetStateAction<boolean>> }) {
13  const [frames, setFrames] = useState<Frame[] | null>(null)
14 
15  useEffect(() => {
16    if (enabled && !frames && typeof window !== 'undefined') {
17      import('./animation-frames.js')
18        .then(mod => setFrames(mod.frames))
19        .catch(() => setEnabled(false))
20    }
21  }, [enabled, frames, setEnabled])
22 
23  if (!frames) return <Skeleton />
24  return <Canvas frames={frames} />
25}
26```
27 
28The `typeof window !== 'undefined'` check prevents bundling this module for SSR, optimizing server bundle size and build speed.
29