feat: skeleton loaders for page navigation#50
Merged
rohanchkrabrty merged 6 commits intomainfrom May 7, 2026
Merged
Conversation
Extract fetch logic into useCallback (fetchApiSpecs, fetchPageData). Both callbacks own their loading state. Use ref for currentPath to avoid stale dependency. DocsPage renders loading placeholder when isLoading is true. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add Skeleton component to Theme interface. Each theme provides its own skeleton matching its content layout. DocsPage renders theme skeleton when isLoading is true. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
To continue reviewing without waiting, purchase usage credits in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the 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 configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis PR introduces a loading skeleton UI feature to Chronicle's page renderer. The Theme interface gains an optional Skeleton component, PageContext adds isLoading state and async fetch callbacks, skeleton UI components are created for both default and paper themes with CSS styling, and DocsPage is updated to display loaders during data fetches. ChangesLoading Skeleton UI Feature
Possibly Related PRs
Suggested Reviewers
Estimated Code Review Effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
rsbh
force-pushed
the
feat_skeleton_loaders
branch
from
f6a2fc5 to
5f9af64
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/chronicle/src/lib/page-context.tsx (1)
61-63:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winRemove unused
isApisRoute— CI is failing on this.The function is never called; the API route branch in
useEffectalready usesroute.type === RouteType.ApiIndex || route.type === RouteType.ApiPagedirectly.🔧 Proposed fix
-function isApisRoute(pathname: string): boolean { - return pathname === '/apis' || pathname.startsWith('/apis/'); -} -🤖 Prompt for 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. In `@packages/chronicle/src/lib/page-context.tsx` around lines 61 - 63, The function isApisRoute in page-context.tsx is unused and causing CI to fail; remove the entire isApisRoute function declaration (function isApisRoute(pathname: string): boolean { ... }) and any associated imports that only existed for it, and verify there are no remaining references to isApisRoute (the code already checks route.type === RouteType.ApiIndex || RouteType.ApiPage). After deletion, run tests/CI to confirm the unused symbol error is resolved.
🧹 Nitpick comments (1)
packages/chronicle/src/lib/page-context.tsx (1)
108-114: 💤 Low valueMove
PageDatainterface to module scope.TypeScript interfaces declared inside a function body are syntactically legal but unusual and can confuse tooling. Hoisting it alongside the other type declarations at module scope makes it independently documentable and reusable.
♻️ Proposed refactor
+interface PageData { + frontmatter: Frontmatter; + relativePath: string; + originalPath?: string; + prev?: PageNavLink | null; + next?: PageNavLink | null; +} + export function PageProvider(...) { ... - interface PageData { - frontmatter: Frontmatter; - relativePath: string; - originalPath?: string; - prev?: PageNavLink | null; - next?: PageNavLink | null; - } - const fetchPageData = useCallback(async (slug: string[]): Promise<PageData> => {🤖 Prompt for 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. In `@packages/chronicle/src/lib/page-context.tsx` around lines 108 - 114, The PageData interface is currently declared inside a function scope; move its declaration to module scope alongside other type declarations so it’s reusable and discoverable. Locate the PageData interface, cut it out of the function body, and paste it at the top-level of the module with the other interfaces (keeping the same properties: frontmatter, relativePath, originalPath?, prev?, next?); ensure any references to PageData (e.g., in function signatures or generics) remain unchanged and import/export behavior is preserved if applicable.
🤖 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/lib/page-context.tsx`:
- Around line 116-130: When starting a new docs navigation, clear any stale
page/error synchronously so the skeleton stays visible during the entire
fetch+MDX load: before invoking the async IIFE that calls fetchPageData and
loadMdx, call setPage(null) and setErrorStatus(null) (the minimal fix) so !page
remains true until the IIFE finishes; alternatively, for a more robust fix move
setIsLoading(true)/setIsLoading(false) out of fetchPageData/fetchApiSpecs and
wrap the entire effect (fetch + loadMdx) in a single loading scope, but do not
change render guards in DocsPage.
- Around line 116-130: The try/catch in fetchPageData is a no-op because the
catch only rethrows; remove the catch and wrap the fetch logic in a try/finally
so setIsLoading(false) still runs. Edit the fetchPageData function to drop the
catch block (leaving the try with the fetch, res.ok check and return await
res.json()) and keep the finally that calls setIsLoading(false) so errors
propagate naturally; reference: fetchPageData and setIsLoading.
In `@packages/chronicle/src/themes/paper/Page.module.css`:
- Around line 241-244: .headerLoader sets align-items: center but lacks display:
flex, so centering won't work; update the CSS rule for .headerLoader to make it
a flex container (add display: flex) so align-items takes effect, and ensure
this class is applied to the wrapper passed as containerClassName to the
<Skeleton> component so the skeleton content is vertically centered.
In `@packages/chronicle/src/themes/paper/Skeleton.tsx`:
- Line 1: Remove the unused Flex import from the module import statement in
Skeleton.tsx: locate the import line that currently imports { Flex, Skeleton }
and delete Flex so only Skeleton is imported; this removes the unused symbol
causing the CI/linter failure and leaves the Skeleton component usage intact.
In `@packages/chronicle/src/types/theme.ts`:
- Line 23: The Theme interface currently requires Skeleton: React.ComponentType
which breaks existing themes; make the Skeleton property optional on the Theme
interface (i.e., Skeleton?: React.ComponentType) so older theme objects still
type-check, and update DocsPage (where Skeleton is used) to guard its render by
checking for theme.Skeleton and falling back to a default or null when absent;
ensure getTheme continues to provide Skeleton for built-in themes so runtime
behavior is unchanged.
---
Outside diff comments:
In `@packages/chronicle/src/lib/page-context.tsx`:
- Around line 61-63: The function isApisRoute in page-context.tsx is unused and
causing CI to fail; remove the entire isApisRoute function declaration (function
isApisRoute(pathname: string): boolean { ... }) and any associated imports that
only existed for it, and verify there are no remaining references to isApisRoute
(the code already checks route.type === RouteType.ApiIndex ||
RouteType.ApiPage). After deletion, run tests/CI to confirm the unused symbol
error is resolved.
---
Nitpick comments:
In `@packages/chronicle/src/lib/page-context.tsx`:
- Around line 108-114: The PageData interface is currently declared inside a
function scope; move its declaration to module scope alongside other type
declarations so it’s reusable and discoverable. Locate the PageData interface,
cut it out of the function body, and paste it at the top-level of the module
with the other interfaces (keeping the same properties: frontmatter,
relativePath, originalPath?, prev?, next?); ensure any references to PageData
(e.g., in function signatures or generics) remain unchanged and import/export
behavior is preserved if applicable.
🪄 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: 4fbaf86f-e6c0-4fd9-a59a-3f6db7cc2f6a
📒 Files selected for processing (8)
packages/chronicle/src/lib/page-context.tsxpackages/chronicle/src/pages/DocsPage.tsxpackages/chronicle/src/themes/default/Skeleton.tsxpackages/chronicle/src/themes/default/index.tspackages/chronicle/src/themes/paper/Page.module.csspackages/chronicle/src/themes/paper/Skeleton.tsxpackages/chronicle/src/themes/paper/index.tspackages/chronicle/src/types/theme.ts
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
rohanchkrabrty
requested changes
May 7, 2026
rohanchkrabrty
approved these changes
May 7, 2026
4 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
isLoadingstate toPageProviderwith explicit loading flag for docs page fetchesPageProvider— extractfetchApiSpecsandfetchPageDataintouseCallback, useuseReffor path trackingSkeletontoThemeinterface — each theme provides its own skeleton component<Skeleton>DocsPagerenders theme-specific skeleton during client-side navigationTest plan
🤖 Generated with Claude Code