feat: Lazy-load ExportDialog component for improved performance #125
Conversation
WalkthroughThe home page component now implements code splitting by replacing a direct ProjectStats import with React.lazy and wrapping it in a Suspense boundary. The page renders HomePageContainer immediately while ProjectStats loads asynchronously, displaying a "Loading analytics..." fallback message during the load phase. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/(general)/page.tsx (1)
1-41: Critical inconsistency between PR description and implementation.The PR objectives state that the change "introduces lazy loading for the
ExportDialogcomponent," but the actual code changes implement lazy-loading for theProjectStatscomponent instead. Additionally,ExportDialogremains imported on line 6 but is never used in the component.Please clarify:
- Is the PR description incorrect?
- Should ExportDialog also be lazy-loaded?
- Or were the wrong changes committed to this PR?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/app/(general)/page.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/app/(general)/page.tsx (2)
src/components/models/analytics/ProjectStats.tsx (1)
ProjectStats(12-72)src/components/pages/home/HomePageContainer.tsx (1)
HomePageContainer(15-41)
🪛 GitHub Check: lint-and-build
src/app/(general)/page.tsx
[warning] 6-6:
'ExportDialog' is defined but never used
| import { getProjectAnalytics } from '@/actions/analytics'; | ||
| import { BasicAlert } from '@/components/common/BasicAlert'; | ||
| import { HomePageContainer } from '@/components/pages/home/HomePageContainer'; | ||
| import { ExportDialog } from '@/components/models/projects/ExportDialog'; |
There was a problem hiding this comment.
Remove unused import.
The ExportDialog component is imported but never used in this file. Either remove the import or add the missing functionality mentioned in the PR description.
Apply this diff to remove the unused import:
-import { ExportDialog } from '@/components/models/projects/ExportDialog';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { ExportDialog } from '@/components/models/projects/ExportDialog'; |
🧰 Tools
🪛 GitHub Check: lint-and-build
[warning] 6-6:
'ExportDialog' is defined but never used
🤖 Prompt for AI Agents
In src/app/(general)/page.tsx around line 6, the import "ExportDialog" is
unused; remove the import statement to eliminate dead code (or if the PR
intended to use it, add the corresponding JSX where appropriate). Update the
file by deleting the unused import line and run a quick typecheck/lint to ensure
no other references remain.
| import { HomePageContainer } from '@/components/pages/home/HomePageContainer'; | ||
| import { ExportDialog } from '@/components/models/projects/ExportDialog'; | ||
| import { ProjectStats } from '@/components/models/analytics/ProjectStats'; | ||
| const ProjectStats = React.lazy(() => import('@/components/models/analytics/ProjectStats')); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n src/app/\(general\)/page.tsx | head -30Repository: Authormaton/authormaton
Length of output: 1505
🌐 Web query:
Next.js 16 next/dynamic vs React.lazy server components best practices
💡 Result:
Short summary + best practices:
-
What each is for
- next/dynamic — Next.js wrapper around React.lazy + Suspense with Next features: loading fallback, ssr control (ssr: false), preloading behavior, and integration with the router/build. Use it for lazy-loading Client Components in Next apps. [1][2]
- React.lazy — native React lazy + Suspense. Client-only, simpler, no Next-specific options (no ssr control or preload). Use it when you only need plain Suspense-based lazy loading and don’t need Next features. [1][2]
-
Server Components
- Server Components are automatically code-split and streamed by Next; you generally do NOT lazy-load them with next/dynamic/React.lazy. If you need “on-demand” behavior, wrap the Server Component in a Client Component and lazy-load that client wrapper (the server part still renders on the server). You cannot truly lazy-load the server component itself the same way client components are lazy-loaded. [1][4]
-
Practical best practices (concise)
- Default: treat Server Components as server-rendered and rely on streaming/code-splitting; only lazy-load Client Components. [1]
- Use next/dynamic when you need Next features: SSR toggle (ssr:false), built-in loading component, preloading and Next’s bundle matching. Prefer it for modals, big interactive widgets, or components you want excluded from initial client JS. [1][2]
- Use React.lazy + Suspense when you have plain React-only clients or small nested components and you want minimal dependency on Next APIs. It’s fine for inner, non-critical components. [1]
- Avoid trying to dynamic-import Server Components directly; instead create a lightweight Client wrapper that imports/embeds the Server Component or fetches it via a separate client-driven fetch/render approach. [4]
- Watch edge cases (FOUC/flicker) on complex nested dynamic imports — prefer top-level dynamic imports or flatten dynamic boundaries; test navigation/streaming behavior. [4][3]
-
Implementation notes
- next/dynamic must receive a static import path inside the dynamic call for Next to map bundles; multi-module dynamic loading was deprecated — use one dynamic per module. [3][2]
- Remember lazy loading applies only to Client Components; mark client files with "use client". [1]
References
- Next.js — Lazy loading / App Router guide (Next docs). [1]
- Next.js — Pages Router lazy-loading guide. [2]
- Next.js docs message: next/dynamic deprecated multi-module loading. [3]
- Next.js discussion: dynamically loading Server Components guidance / patterns. [4]
🏁 Script executed:
cat -n src/components/models/analytics/ProjectStats.tsx | head -50Repository: Authormaton/authormaton
Length of output: 2479
Remove React.lazy() — Server Components cannot lazy-load Client Components this way.
The issue is architectural: HomePage is a Server Component, but React.lazy() is designed for Client Components to use within their own component trees. Lazy-loading a Client Component from a Server Component doesn't work properly in Next.js.
Create a Client Component wrapper instead:
-const ProjectStats = React.lazy(() => import('@/components/models/analytics/ProjectStats'));Then create src/components/models/analytics/ProjectStatsWrapper.tsx:
'use client';
import { ProjectStats } from './ProjectStats';
export { ProjectStats as ProjectStatsWrapper };Import the wrapper in the Server Component:
import { ProjectStatsWrapper as ProjectStats } from '@/components/models/analytics/ProjectStatsWrapper';Alternatively, import ProjectStats directly in the Server Component and rely on Next.js's automatic code-splitting.
🤖 Prompt for AI Agents
In src/app/(general)/page.tsx around line 7, remove the React.lazy call that
attempts to lazy-load a Client Component from a Server Component; instead create
a Client wrapper component file
src/components/models/analytics/ProjectStatsWrapper.tsx with a 'use client'
directive that imports and re-exports the Client ProjectStats, then replace the
React.lazy import in page.tsx with a normal import of the wrapper (import {
ProjectStatsWrapper as ProjectStats } from
'@/components/models/analytics/ProjectStatsWrapper'); alternatively just import
the Client ProjectStats directly and rely on Next.js automatic code-splitting.
| <Suspense fallback={<div>Loading analytics...</div>}> | ||
| <ProjectStats /> | ||
| </Suspense> |
There was a problem hiding this comment.
Critical: ProjectStats missing required props.
The ProjectStats component requires three props (totalProjects, projectsByStatus, projectsByCreationMonth) but is rendered without any props. This will cause runtime errors or display incorrect data.
The analytics data is fetched on line 21 but never passed to the component.
Apply this diff to pass the required props:
+ if (analyticsError) {
+ return <BasicAlert variant='destructive' title='Error loading analytics' description={analyticsError.message} />;
+ }
+
+ if (!analyticsResult.success) {
+ return <BasicAlert variant='destructive' title='Error loading analytics' description={analyticsResult.error} />;
+ }
+
+ const { totalProjects, projectsByStatus, projectsByCreationMonth } = analyticsResult.data;
+
return (
<>
<HomePageContainer initialProjects={initialProjects} userId={userId} />
<Suspense fallback={<div>Loading analytics...</div>}>
- <ProjectStats />
+ <ProjectStats
+ totalProjects={totalProjects}
+ projectsByStatus={projectsByStatus}
+ projectsByCreationMonth={projectsByCreationMonth}
+ />
</Suspense>
</>
);Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/app/(general)/page.tsx around lines 36 to 38, ProjectStats is being
rendered without the required props even though analytics data is fetched
earlier (around line 21); pass the fetched analytics values into the component
by supplying the three required props: totalProjects, projectsByStatus, and
projectsByCreationMonth (e.g., <ProjectStats
totalProjects={analytics.totalProjects}
projectsByStatus={analytics.projectsByStatus}
projectsByCreationMonth={analytics.projectsByCreationMonth} />), ensuring the
variable names match the fetched response and types align.
|
the lazy loading for |
Overview: This PR introduces lazy loading for the
ExportDialogcomponent within the home page to enhance initial render performance.Changes
src/app/(general)/page.tsxto dynamically importExportDialog.next/dynamicfor client-side rendering of the component.Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.