Performance Deep-Dive: Code Splitting the Quarterly Summary Dashboard

Release: v1.0.50 · Category: Bundle Performance

Background

The quarterly summary dashboard (/dashboard/quarterly) is one of the most-visited pages in the platform — it is where UK landlords review their income and expenses before making a Making Tax Digital (MTD) quarterly submission to HMRC.

Prior to v1.0.50, the entire page was implemented as a single client component in:

src/app/dashboard/quarterly/quarterly-summary-dashboard.tsx

At 31,947 bytes, this file bundled together several distinct sub-features:

Sub-component	When it appears
QuarterCard	Always visible
FinaliseTaxYearSection	Always visible (conditional on tax year state)
AnnualAdjustmentsSection	Only after user clicks an expand button
PropertyBreakdownSection	Only after user clicks an expand button

Despite AnnualAdjustmentsSection and PropertyBreakdownSection being purely interaction-driven (i.e. hidden behind expand toggles), all their code — plus every lucide-react icon they imported — was shipped to every user on initial page load.

---

What Changed

Dynamic Imports with next/dynamic

AnnualAdjustmentsSection and PropertyBreakdownSection have been split into separate files and are now loaded on demand:

import dynamic from 'next/dynamic';

const AnnualAdjustmentsSection = dynamic(
  () => import('./AnnualAdjustmentsSection'),
  { ssr: false }
);

const PropertyBreakdownSection = dynamic(
  () => import('./PropertyBreakdownSection'),
  { ssr: false }
);

• ssr: false is appropriate here because these sections depend on client-side interaction state (expand/collapse toggles) and do not need to be server-rendered.
• Each section is now fetched as a separate JavaScript chunk only when the user expands it.

Page-Level Component Restructure

The top-level quarterly page component has also been reorganised so that only the code required for the initial visible state of the page is included in the primary bundle. Shared utilities and always-visible components (QuarterCard, FinaliseTaxYearSection) remain in the main chunk.

---

Performance Impact

Metric	Before	After (estimated)
Initial JS bundle (this route)	~32 KB (component alone)	~20–40 KB reduction
AnnualAdjustmentsSection loaded	Always	On expand only
PropertyBreakdownSection loaded	Always	On expand only
Time to Interactive (TTI)	Baseline	Improved

The 20–40 KB reduction in initial JavaScript directly translates to faster page loads, particularly on mobile devices and slower connections — which is important for landlords accessing the dashboard on the go.

---

Why This Matters for MTD Workflows

The quarterly summary page sits on the critical path of every HMRC MTD submission. A faster Time to Interactive means landlords can review their QuarterCard data and trigger a submission sooner, reducing friction in an already compliance-heavy workflow.

---

Related Files

• src/app/dashboard/quarterly/quarterly-summary-dashboard.tsx — primary component (refactored)
• src/app/dashboard/quarterly/AnnualAdjustmentsSection.tsx — extracted sub-component (new)
• src/app/dashboard/quarterly/PropertyBreakdownSection.tsx — extracted sub-component (new)