perf: lazy-load PDF reader in DocumentViewer

[BigSimmo]

Motivation

• Reduce initial client JavaScript for the document-viewer route by avoiding eager inclusion of the heavy PDF reader when viewing non-PDF documents.
• The DocumentViewer previously imported the PDF reader module unconditionally, causing unnecessary parse/bytes on image/text/download-only journeys.

Description

• Replace the static import of the PDF reader with client-only dynamic imports using next/dynamic for PdfCanvasViewer and NativePdfEmbed, deferring pdfjs-dist load until the reader is actually needed.
• Add an accessible loading placeholder component PdfPreviewLoading (uses aria-busy and polite live region) to keep the UX stable while the reader chunk loads.
• Add a regression Vitest that asserts the reader is not statically imported back into the document route and that the dynamic import + loading boundary is present.
• Files changed: src/components/DocumentViewer.tsx, tests/document-viewer-pdf-reader-lazy.test.ts.

Testing

• Installed dependencies with npm ci (Node 24.x / npm 11.x) and observed no audit vulnerabilities. — succeeded.
• Focused regression test: ./node_modules/.bin/vitest run tests/document-viewer-pdf-reader-lazy.test.ts — passed (1/1).
• Full unit suite: npm run test — completed successfully in this environment.
• PR-local/cheap verification: npm run verify:cheap (includes lint, typecheck, and unit tests) — completed successfully; typecheck and eslint were included and passed as part of that gate.
• Attempted bundle analysis: npm run build:analyze and exact before/after gzip measurement could not complete because the build process in this environment failed to fetch Google-hosted font resources (fonts.gstatic.com), blocking exact production bundle-size measurement; this is an external-network/environment limitation, not a code regression.

If you want, I can push this branch and open a PR for you once an origin remote is available (the push attempt here failed because no remote is configured), and I can re-run npm run build:analyze in an environment that can reach the font CDN to capture the precise gzip delta before merge.

---

Codex Task

Summary by CodeRabbit

• Performance
  • PDF previews now load their viewer components only when needed, improving initial document-viewing load times.
  • Added a loading indicator while PDF preview components are being fetched.
• Accessibility
  • PDF loading states now provide screen-reader status updates.

[supabase]

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[coderabbitai]

📝 Walkthrough

Walkthrough

DocumentViewer now lazy-loads PDF preview components with client-only dynamic imports and a shared accessible loading fallback. A new Vitest test verifies the dynamic import structure and absence of static PDF viewer imports.

Changes

PDF preview loading

Layer / File(s)	Summary
Dynamic PDF component loading src/components/DocumentViewer.tsx	Static PDF viewer imports are replaced with next/dynamic loaders for PdfCanvasViewer and NativePdfEmbed, using PdfPreviewLoading and ssr: false.
Lazy-loading validation tests/document-viewer-pdf-reader-lazy.test.ts	The test checks that PDF components use dynamic imports and are absent from the initial static import path.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant DocumentViewer
  participant next_dynamic
  participant PdfPreviewLoading
  participant PdfCanvasViewer
  DocumentViewer->>next_dynamic: request PDF preview component
  next_dynamic->>PdfPreviewLoading: render loading fallback
  next_dynamic->>PdfCanvasViewer: load component without SSR
  PdfCanvasViewer-->>DocumentViewer: render PDF preview

Loading

Possibly related PRs

• BigSimmo/Database#509: Updates the DocumentViewer PDF preview UI and mode toggle.
• BigSimmo/Database#651: Updates PDF viewer memoization and document reload handling in DocumentViewer.

Suggested reviewers: claude

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is informative, but it does not follow the required template sections or checklist format, and it omits Summary, Risk, and Rollback.	Reformat the PR description to match the template: add Summary, complete Verification checkboxes, and fill Risk and Rollback for this build-related change.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarizes the main change: lazy-loading the PDF reader in DocumentViewer.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/execute-frontend-performance-improvement-task

---

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

[coderabbitai]

🧹 Nitpick comments (1)

tests/document-viewer-pdf-reader-lazy.test.ts (1)

15-15: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Use a regex assertion instead of exact string matching for the dynamic import check.

The toContain call embeds a literal \n and two-space indentation, making the test brittle against any formatting change (e.g., Prettier line-width adjustments). A regex-based toMatch preserves the intent without coupling to whitespace.

♻️ Proposed refactor for resilient assertion

-    expect(viewerSource).toContain('dynamic(\n  () => import("`@/components/document-viewer/pdf-canvas-viewer`")');
+    expect(viewerSource).toMatch(
+      /dynamic\(\s*\(\)\s*=>\s*import\(["']@\/components\/document-viewer\/pdf-canvas-viewer["']\)/,
+    );

🤖 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 `@tests/document-viewer-pdf-reader-lazy.test.ts` at line 15, Update the dynamic
import assertion in the PDF reader lazy-loading test to use toMatch with a regex
that verifies dynamic imports "`@/components/document-viewer/pdf-canvas-viewer`"
while allowing arbitrary whitespace and line breaks, instead of relying on the
exact formatted string passed to toContain.

🤖 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.

Nitpick comments:
In `@tests/document-viewer-pdf-reader-lazy.test.ts`:
- Line 15: Update the dynamic import assertion in the PDF reader lazy-loading
test to use toMatch with a regex that verifies dynamic imports
"`@/components/document-viewer/pdf-canvas-viewer`" while allowing arbitrary
whitespace and line breaks, instead of relying on the exact formatted string
passed to toContain.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 877dcf66-65a0-49da-93c8-4a6efe72ce78

📥 Commits

Reviewing files that changed from the base of the PR and between b04c95f and 00421e6.

📒 Files selected for processing (2)

• src/components/DocumentViewer.tsx
• tests/document-viewer-pdf-reader-lazy.test.ts