Issue 17: Strict Dynamic Component Code Splitting Tailored for Slow Field Networks

[elizabetheonoja-art]

Scope

File: src/app/layout.tsx

Problem

The initial JavaScript bundle includes all spatial rendering, tariff editing, and analytics libraries regardless of whether the user is a field engineer (needs only spatial + provisioning) or an administrator (needs tariffs + analytics). On slow field networks (2G/3G), this 500KB+ initial payload causes 10+ second load times.

Requirements

1. Implement dynamic imports for heavy components:
   • GridMap → next/dynamic with ssr: false
   • LiveDataView → next/dynamic
   • TariffEditor → next/dynamic
   • TxModal → next/dynamic
2. Each dynamic import should have a loading skeleton matching the component dimensions.
3. Strip @stellar/stellar-sdk, bignumber.js, and canvas libraries from the initial critical path.
4. Use React.lazy + Suspense as fallback for client-only transitions.
5. Measure bundle size impact: target <150KB initial JS for field-focused routes.

Resolution Strategy

• next/dynamic with named exports: dynamic(() => import("@/components/spatial/GridMap"), { ssr: false }).
• Loading skeleton: same border-radius, height, and background as the actual component.
• Verify with npx next build and check the .next/static/chunks sizes.

Tags

layout, performance, code-splitting, network

[Jess52487]

I would love to work on this please assign me.

[grantfox-oss]

🦊 GrantFox — @Jess52487 has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #16)
2. Your PR will be reviewed by the Utility-Protocol maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@Jess52487's PR #35 was approved and merged by @elizabetheonoja-art.

🏆 @Jess52487: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (258 total points). Track your full progress on GrantFox.

👏 Great work, @Jess52487! Keep contributing to Utility-Protocol.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@sandrawillow001-afk's PR #37 was approved and merged by @elizabetheonoja-art.

🏆 @sandrawillow001-afk: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (118 total points). Track your full progress on GrantFox.

👏 Great work, @sandrawillow001-afk! Keep contributing to Utility-Protocol.