React.lazy

Drop-in replacement for React.lazy(). After analyze, skeletal-ui replaces React.lazy with lazyWithSkeleton from skeletal-ui.

Before / After

// Before
import React from 'react'
const HeavyChart = React.lazy(() => import('./HeavyChart'))
 
// After — auto-applied by skeletal-ui analyze
import { lazyWithSkeleton } from 'skeletal-ui'
const HeavyChart = lazyWithSkeleton(() => import('./HeavyChart'))

How it works

lazyWithSkeleton is a drop-in replacement for React.lazy. It:

Wraps the dynamic import factory
After the first render, loads the component's skeleton named export from the module
Exposes it on HeavyChart.skeleton so SkeletonWrapper can find it automatically

No explicit Suspense or fallback prop needed:

export default function Dashboard() {
  // SkeletonWrapper auto-resolves the skeleton from HeavyChart.skeleton
  return (
    <SkeletonWrapper>
      <HeavyChart />
    </SkeletonWrapper>
  )
}

Generated skeleton

// HeavyChart.skeleton.tsx
// skeletal:hash:b2c3d4e5
// skeletal:pattern:lazy
'use client'
import { Sk } from 'skeletal-ui'
 
export function HeavyChartSkeleton() {
  return <Sk.Image aspectRatio="16/9" width="100%" />
}
 
export { HeavyChartSkeleton as skeleton }

Config

lazy: { enabled: true }  // default: true

CSR next/dynamic