perf: lazy load page components and playground dialog

[rsbh]

Summary

• React.lazy for page components (ApiLayout, ApiPage, DocsLayout, DocsPage, LandingPage) in App.tsx
• Lazy load PlaygroundDialog in Layout.tsx — CodeMirror bundle only loads when user clicks "Test request"
• entry-client.js: 1MB+ → 325KB (101KB gzip), 68% reduction
• PlaygroundDialog (429KB) and ApiPage (99KB) split into separate on-demand chunks

Test plan

• Docs SSR renders correctly
• API SSR renders correctly
• Page navigation works (lazy chunks load on demand)
• Playground dialog opens and functions after lazy load
• No hydration mismatch errors

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
chronicle	Ready	Preview, Comment	May 18, 2026 6:15am

[coderabbitai]

Warning

Rate limit exceeded

@rsbh has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 30 minutes and 33 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 23b5a95e-f2d7-46aa-b4c0-5b1cb84a1c27

📥 Commits

Reviewing files that changed from the base of the PR and between cb3c0fc and 802980b.

📒 Files selected for processing (4)

• packages/chronicle/src/server/App.module.css
• packages/chronicle/src/server/App.tsx
• packages/chronicle/src/themes/default/Layout.tsx
• packages/chronicle/src/themes/default/Page.tsx

📝 Walkthrough

Walkthrough

App and Layout components are updated to implement lazy loading. Route components and the API playground dialog now use React.lazy() imports wrapped in Suspense boundaries. App provides a theme-aware skeleton fallback, while Layout uses a null fallback for the dialog.

Changes

Lazy Loading with Suspense Integration

Layer / File(s)	Summary
App-level lazy loading and theme-aware Suspense fallback packages/chronicle/src/server/App.tsx	Route components switch to React.lazy() imports; route content is wrapped in a Suspense boundary with a dynamic ThemeSkeleton fallback that selects the appropriate skeleton based on config.theme?.name.
Dialog lazy loading in Layout component packages/chronicle/src/themes/default/Layout.tsx	PlaygroundDialog import switches to React.lazy(); TestRequestButton now conditionally renders the dialog in a Suspense boundary with fallback={null} only when the dialog is open.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• raystack/chronicle#50: Adds per-theme Skeleton and PageSkeleton components that are now consumed by the new ThemeSkeleton fallback introduced in this PR.

Suggested reviewers

• rohanchkrabrty

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'perf: lazy load page components and playground dialog' directly and concisely describes the main change: implementing lazy loading for page components and the playground dialog to improve performance.
Description check	✅ Passed	The description is well-related to the changeset, detailing the specific components lazy-loaded, bundle size improvements, and test plan with checkmarks for completed testing.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch perf/lazy-load-chunks

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/chronicle/src/server/App.tsx`:
- Around line 42-52: Server-rendered HTML can mismatch the client because
React.Suspense with ThemeSkeleton fallback may be rendered differently between
server and client; update App.tsx so server and client produce the same markup
during hydration by disabling Suspense fallback on the server or using an
SSR-friendly lazy loader. Concretely, detect server vs client (e.g., a
isHydrated or typeof window check) and: when running on server, render the lazy
children directly (ApiLayout/ApiPage or DocsLayout/DocsPage/LandingPage) instead
of wrapping them with Suspense fallback, or replace React.lazy usage with an
SSR-aware loader (e.g., loadable-components) so Suspense doesn't emit a fallback
on the client during hydration; ensure the changes touch the Suspense wrapper,
ThemeSkeleton, and how ApiPage/DocsPage/LandingPage are imported so server and
client markup match.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e7e3dcc8-581e-4272-8308-e712034f5f9c

📥 Commits

Reviewing files that changed from the base of the PR and between 08f2641 and cb3c0fc.

📒 Files selected for processing (2)

• packages/chronicle/src/server/App.tsx
• packages/chronicle/src/themes/default/Layout.tsx