Skip to content

Conversation

@beydogan
Copy link

@beydogan beydogan commented Dec 7, 2025

I noticed the dashboard takes a while(20-30seconds) to load sometimes and that led me investigate the reason. I found out one of the JS chunks is 2035kb, which is almost half of the whole JS chunks.

That chunk is three.js library. Which is a dependency for @splinetool/react-spline, which is only being used to render a spline scene on the error page.

As a user, I prefer to have a fast loading dashboard instead of a fancy 3D animation on an error page. Though, same/similar animation can be achieved via lottie or as css animation probably, which will have much smaller size.

This change basically reduces JS bundle size from 4283kb to 2248kb. Even though the assets are being cached I get this slow loading dashboard several times per day. I find that a bit poor UX.

Further optimization is possible by implementing tree shaking to companyicons to bundle only used icons to the build instead of all the icons. That would probably cut another ~600kb since webapp is using only 5 icons from there but loading whole 748kb.

Also noticed the assets are being served without gzip on production, which would improve the situation if you want to keep the animation.

 > curl -I -H "Accept-Encoding: gzip, br" https://cloud.trigger.dev/build/_shared/chunk-TNKKYXTE.js 2>&1

content-type: application/javascript; charset=UTF-8

I'm noticing this issue since currently I'm in Türkiye and have a high latency to US-East. Probably a CDN would help a lot too!

✅ Checklist

  • I have followed every step in the contributing guide
  • The PR title follows the convention.
  • I ran and tested the code works

Testing

Ran locally and went to a 404 page.


Changelog

fix(webapp): remove Spline 3D animation to reduce bundle size


Screenshots

Before

image

After

image

Resources

image

💯

@changeset-bot
Copy link

changeset-bot bot commented Dec 7, 2025

⚠️ No Changeset found

Latest commit: e95ef58

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 7, 2025

Walkthrough

The pull request removes Spline-based animated background functionality from the ErrorDisplay component. The changes include: removing Framer Motion and Spline imports from ErrorDisplay.tsx, deleting the animated spline scene JSX block, simplifying the container and wrapper div layouts from relative positioning with z-index and margin offsets to a cleaner flex layout structure, and removing the "@splinetool/react-spline" dependency from package.json. The component's core content (Header, message, button) and props remain unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

  • Verify that the simplified flex layout renders correctly without visual regressions
  • Confirm no other components depend on the Spline library
  • Check that removal of relative positioning and z-index adjustments does not impact other styled elements in the ErrorDisplay component

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: removing Spline 3D animation to reduce bundle size, with the quantified impact (~47%) directly relevant to the primary objective.
Description check ✅ Passed PR description comprehensively covers all required sections with detailed context, testing confirmation, changelog, and supporting screenshots.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

❤️ Share

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant