ui-lazy/IDEAS.md

@lilith/ui-lazy - Ideas & Backlog

Testing

Unit Tests

• useLazyComponent - loading states, error handling, preload strategies
• useLazyOnInteraction - triggerProps event handlers
• useLazyOnVisible - IntersectionObserver integration
• createLazyComponent - Suspense wrapping, preload function
• createLazyModal - unmountOnClose behavior, isOpen gating
• LazyBoundary - fallback rendering, error boundary
• Preload utilities - idle callback, delay, network idle

Integration Tests

• Actual dynamic imports with mock modules
• Chunk loading verification
• Error recovery after failed imports
• Retry logic

SSR Compatibility

• Server-side rendering behavior
• Hydration mismatch prevention
• typeof window guards

Demo / Showcase App

Interactive Demo

• Side-by-side comparison: eager vs lazy loading
• Network waterfall visualization
• Real-time bundle size indicators
• Click-to-load demonstration

Performance Dashboard

• Lighthouse score comparison
• Core Web Vitals impact
• Time to Interactive (TTI) metrics
• First Contentful Paint (FCP) delta

Code Playground

• Live editable examples
• Copy-paste ready snippets
• Framework integration examples (Vite, Next.js, Remix)

Package Enhancements

Retry Logic

createLazyComponent(importFn, {
  retryCount: 3,
  retryDelay: 1000,
  onRetry: (attempt, error) => console.log(`Retry ${attempt}`)
})

Loading Priority

createLazyComponent(importFn, {
  priority: 'high' | 'low' | 'idle'
})

Prefetch Hints

// Add <link rel="prefetch"> to document head
createLazyComponent(importFn, {
  prefetchHint: true
})

Bundle Analyzer Integration

// Named chunks for easier bundle analysis
createLazyComponent(
  () => import(/* webpackChunkName: "payment-modal" */ '@lilith/payments'),
  { chunkName: 'payment-modal' }
)

DevTools Integration

• React DevTools component naming
• Performance profiler markers
• Lazy load timeline visualization

Documentation

Storybook

• Visual component gallery
• Interactive prop controls
• Responsive testing
• Accessibility audit

Guides

• "When to lazy load" decision tree
• Performance optimization checklist
• Common pitfalls and solutions
• Migration from React.lazy + Suspense

API Docs

• TSDoc comments → generated docs
• Type definitions documentation
• Version changelog