Patterns
skeletal-ui detects and wires four patterns automatically.
| Pattern | Trigger | Docs |
|---|---|---|
| RSC | async component inside <SkeletonWrapper> | RSC → |
| CSR | non-async component inside <SkeletonWrapper> | CSR → |
| lazy | React.lazy(() => import('./X')) | lazy → |
| dynamic | next/dynamic(() => import('./X')) | dynamic → |
Detection
The scanner checks the async keyword on the source function:
async function→rscpattern- non-
asyncfunction →csrpattern React.lazy(...)→lazypatternnext/dynamic(...)→dynamicpattern
Playwright wait behavior
| Pattern | Playwright wait |
|---|---|
| RSC | waits for networkidle (server data needed) |
| CSR | skips networkidle (client-side, no server chunk) |
| lazy | waits for networkidle (chunk load) |
| dynamic | waits for networkidle (chunk load) |