Apply Plotly code splitting

[annavik]

The Plotly lib is very large, which means if we include it to our main JS bundle, it will affect our FCP metric (First Contentful Paint). By lazy loading this lib, we can present content to users sooner. Compared to other assets we load, a few MB might not seem like a big deal, but it's important to keep the main bundle as small as possible.

I had already prepared code for this, but forgot to apply it to the new species charts.

Before (Plotly part of main bundle):

After (splitting Plotly code into a separate chunk):

You can see here the library itself actually way larger than the rest of the frontend app.

Summary by CodeRabbit

• Refactor
  • Updated internal component imports to utilize an optimized loading pattern for better efficiency.

[netlify]

✅ Deploy Preview for antenna-preview ready!

Name	Link
🔨 Latest commit	8023027
🔍 Latest deploy log	https://app.netlify.com/projects/antenna-preview/deploys/6911cc20e35dfb0008a30bad
😎 Deploy Preview	https://deploy-preview-1044--antenna-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 60 (🟢 up 29 from production) Accessibility: 80 (no change from production) Best Practices: 100 (no change from production) SEO: 92 (no change from production) PWA: 80 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

The Plot component import in the species-details page was refactored to use a named import from a lazy-loaded module instead of a default import from the standard module path, changing the import source from plot to lazy-plot.

Changes

Cohort / File(s)	Change Summary
Import source refactoring ui/src/pages/species-details/species-details.tsx	Updated Plot component import from default import (plot/plot) to named import (plot/lazy-plot)

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single file change with straightforward import modification
• No behavioral or API changes
• Direct module path and import form substitution

Poem

🐰 A hop and a skip, the Plot takes a turn,
From default to named, a lazy import we learn,
Lazy-loaded now, more nimble and light,
The species details page gleams ever bright! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description provides context and motivation but lacks required template sections like List of Changes, Related Issues, How to Test, and Deployment Notes.	Add missing template sections: explicitly list changes (e.g., 'Modified species-details.tsx import'), reference any related issues, provide testing instructions, and note any deployment requirements.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main change: applying Plotly code splitting by switching from a default import to a lazy-loaded named import.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch chore/plotly-code-splitting

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 28bc270 and 8023027.

📒 Files selected for processing (1)

• ui/src/pages/species-details/species-details.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Redirect rules
• GitHub Check: Header rules
• GitHub Check: Pages changed

🔇 Additional comments (1)

ui/src/pages/species-details/species-details.tsx (1)

12-12: No issues found—the lazy loading implementation is correct.

The script output confirms that the lazy-plot module properly implements the React lazy loading pattern. The lazy component is rendered inside a Suspense component with fallback content, and an ErrorBoundary wraps it to handle potential loading failures. The import change in species-details.tsx is correct—when the Plot component from lazy-plot is used, React automatically suspends rendering of the component as well as its children, and renders the fallback component by traversing up the tree to find the nearest Suspense component. The Suspense requirement is properly delegated to the lazy-plot module wrapper, which is the standard pattern.

---

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

[mihow]

That was fewer changes that I would have expected. Nice optimization!