fix(web): lazy-load search code preview#1433
Conversation
This comment has been minimized.
This comment has been minimized.
WalkthroughSearch results now client-load the code preview panel and pre-initialize parsers for common languages when the page mounts. The changelog records this behavior. ChangesSearch code preview loading
Estimated code review effort: 2 (Simple) | ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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: 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/web/src/app/`(app)/search/components/searchResultsPage.tsx:
- Line 18: Replace the top-level getCodeParserByLanguageName import with a
dynamic import inside the search page’s pre-warming effect, and invoke the
loaded helper there so `@/lib/codeHighlight` and its CodeMirror parser
dependencies are fetched only when the page mounts.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: fbb5bd41-4e15-4519-b131-35b82975b9b5
📒 Files selected for processing (2)
CHANGELOG.mdpackages/web/src/app/(app)/search/components/searchResultsPage.tsx
| import useCaptureEvent from "@/hooks/useCaptureEvent"; | ||
| import { useNonEmptyQueryParam } from "@/hooks/useNonEmptyQueryParam"; | ||
| import { useSearchHistory } from "@/hooks/useSearchHistory"; | ||
| import { getCodeParserByLanguageName } from "@/lib/codeHighlight"; |
There was a problem hiding this comment.
🚀 Performance & Scalability | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## searchResultsPage.tsx\n'
sed -n '1,220p' 'packages/web/src/app/(app)/search/components/searchResultsPage.tsx'
printf '\n## codeHighlight.ts\n'
sed -n '1,260p' 'packages/web/src/lib/codeHighlight.ts'
printf '\n## usages of getCodeParserByLanguageName\n'
rg -n "getCodeParserByLanguageName|codeHighlight" packages/web/src -g '!**/*.map'Repository: sourcebot-dev/sourcebot
Length of output: 13635
Dynamically import @/lib/codeHighlight here
This client page statically pulls the CodeMirror parser helpers into the initial chunk. Load them inside the pre-warming effect instead so the parser bundle is fetched only when the search page mounts.
🤖 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/web/src/app/`(app)/search/components/searchResultsPage.tsx at line
18, Replace the top-level getCodeParserByLanguageName import with a dynamic
import inside the search page’s pre-warming effect, and invoke the loaded helper
there so `@/lib/codeHighlight` and its CodeMirror parser dependencies are fetched
only when the page mounts.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 4a5c1a7. Configure here.
| const CodePreviewPanel = dynamic( | ||
| () => import("./codePreviewPanel").then(module => ({ default: module.CodePreviewPanel })), | ||
| { ssr: false }, | ||
| ); |
There was a problem hiding this comment.
Blank preview while chunk loads
Medium Severity
When the preview panel is opened, the resizable panel mounts immediately. However, because CodePreviewPanel is dynamically loaded with ssr: false and lacks a loading fallback, users see an empty panel until the component's chunk finishes loading, which is noticeable on slower networks.
Reviewed by Cursor Bugbot for commit 4a5c1a7. Configure here.
1 participant
Summary
CodePreviewPanelso CodeMirror is excluded from the initial search-page module graphSessionimport from the touched componentValidation
yarn workspace @sourcebot/web eslint src/app/\\(app\\)/search/components/searchResultsPage.tsx src/lib/codeHighlight.tsyarn workspace @sourcebot/web tsc --noEmit(blocked by pre-existing type errors in unrelated test fixtures)yarn workspace @sourcebot/web build(Turbopack compilation stalled without output and was stopped)Note
Low Risk
Client-only bundle-splitting and background parser prefetch on the search UI; no auth, API, or data-path changes.
Overview
Improves initial search page load by deferring heavy editor/highlighting code until it is needed, while still warming likely language parsers in the background.
CodePreviewPanelis now loaded withnext/dynamic(ssr: false) instead of a static import, so CodeMirror and the preview panel stay out of the first paint bundle until a user opens a file preview. On mount, the page pre-fetches Lezer parsers for a fixed list of common languages (TypeScript, JavaScript, Python, Go, Rust, Java, C++, C#, JSON) viagetCodeParserByLanguageName, so opening a preview is less likely to wait on parser chunks. An unusedSessionimport was removed from the search results page. CHANGELOG documents the performance fix (#1433).Reviewed by Cursor Bugbot for commit 4a5c1a7. Bugbot is set up for automated code reviews on this repo. Configure here.
Summary by CodeRabbit