feat: lazy-load dashboard chart modules with IntersectionObserver

src/browser/lazy-loader.ts

@@ -0,0 +1,96 @@
+/**
+ * @module Browser/LazyLoader
+ * @description Lazy loads dashboard modules using IntersectionObserver.
+ * Defers dynamic import() calls until the dashboard container enters the viewport,
+ * reducing initial page load and improving Time to Interactive (TTI).
+ *
+ * Falls back to immediate loading when IntersectionObserver is unavailable.
+ *
+ * @performance Each lazy dashboard defers its dynamic import() until the section
+ * scrolls into view (plus a 200 px pre-fetch margin), preventing Chart.js (~200 KB),
+ * D3 (~250 KB) and PapaParse (~50 KB) from blocking the initial parse/render.
+ */
+
+import { logger } from './shared/logger.js';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+/** A dashboard that should be loaded lazily when its container enters the viewport. */
+export interface LazyDashboard {
+  /** The `id` attribute of the section/container element to observe. */
+  containerId: string;
+  /** Async function that dynamically imports and initialises the dashboard. */
+  loader: () => Promise<void>;
+}
+
+/** CSS class applied to a container while its module is loading. */
+export const CHART_SKELETON_CLASS = 'chart-skeleton';
+
+// ─── Public API ───────────────────────────────────────────────────────────────
+
+/**
+ * Register dashboard modules for lazy loading via IntersectionObserver.
+ *
+ * When a container element intersects the viewport (with a 200 px pre-fetch
+ * margin), its loader is called, the skeleton class is added, and removed
+ * once the promise resolves or rejects.
+ *
+ * If `IntersectionObserver` is unavailable (SSR, old browser), all loaders
+ * are invoked immediately as a graceful fallback.
+ *
+ * @param dashboards - Array of lazy-loadable dashboard descriptors.
+ * @param options    - Optional `IntersectionObserver` init overrides.
+ */
+export function initLazyDashboards(
+  dashboards: LazyDashboard[],
+  options: IntersectionObserverInit = { rootMargin: '200px', threshold: 0.01 },
+): void {
+  if (typeof IntersectionObserver === 'undefined') {
+    // Graceful fallback: load everything immediately
+    for (const { containerId, loader } of dashboards) {
+      loader().catch((err: unknown) =>
+        logger.error(`Lazy load failed for #${containerId}:`, err),
+      );
+    }
+    return;
+  }
+
+  // Map element → loader for O(1) lookup inside the observer callback
+  const pending = new Map<Element, () => Promise<void>>();
+
+  const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+    for (const entry of entries) {
+      if (!entry.isIntersecting) continue;
+
+      const el = entry.target as HTMLElement;
+      observer.unobserve(el);
+
+      const loaderFn = pending.get(el);
+      if (!loaderFn) continue;
+      pending.delete(el);
+
+      // Show skeleton while the module is downloading / initialising
+      el.classList.add(CHART_SKELETON_CLASS);
+
+      loaderFn()
+        .then(() => {
+          el.classList.remove(CHART_SKELETON_CLASS);
+          logger.debug(`✓ lazy loaded #${el.id}`);
+        })
+        .catch((err: unknown) => {
+          el.classList.remove(CHART_SKELETON_CLASS);
+          logger.error(`✗ lazy load failed #${el.id}:`, err);
+        });
+    }
+  }, options);
+
+  for (const { containerId, loader } of dashboards) {
+    const el = document.getElementById(containerId);
+    if (!el) {
+      logger.debug(`Lazy loader: #${containerId} not in DOM, skipping`);
+      continue;
+    }
+    pending.set(el, loader);
+    observer.observe(el);
+  }
+}

src/browser/main.ts

@@ -3,9 +3,10 @@
  * @description Single entry point for main Riksdagsmonitor pages (index*.html).
  * Replaces 18 individual script tags with one module import.
  *
- * Each dashboard is initialized independently — if one fails, others continue.
- * Libraries (Chart.js, D3) are imported via Vite bundling from npm packages.
-
+ * Above-the-fold dashboards (stats) are initialised eagerly.
+ * All chart-heavy dashboards are lazy-loaded via IntersectionObserver so that
+ * Chart.js (~200 KB), D3 (~250 KB), and PapaParse (~50 KB) are only downloaded
+ * when the user scrolls their containing section into view.
  *
  * @intelligence Central intelligence platform orchestrator — coordinates 12 analytical dashboards covering OSINT data acquisition, political risk assessment, coalition dynamics, electoral forecasting, and behavioral anomaly detection across 349 Swedish MPs and 8 parties.
  *
@@ -14,46 +15,111 @@
  * @marketing Landing page intelligence showcase — first impression for all 5 target audiences (citizens, journalists, researchers, NGOs, corporations). Each dashboard module is a demonstrable feature for content marketing, social media screenshots, and press coverage. Supports 14-language SEO via separate index files.
  * */
 
-// ─── Library Imports (Vite bundles these from node_modules) ──────────────────
-// Register Chart.js, D3.js, and Papa Parse on globalThis so dashboard modules can access them.
-// Must be imported before any dashboard module that reads (globalThis as any).Chart / .d3 / .Papa.
-import './shared/register-globals.js';
-
 // ─── UI Components ───────────────────────────────────────────────────────────
 import { initBackToTop } from './ui/back-to-top.js';
 
-// ─── Dashboard Modules ──────────────────────────────────────────────────────
+// ─── Eager Dashboard: stats-loader (above-the-fold hero stats, no chart libs) ──
 import { init as initStats } from './dashboards/stats-loader.js';
-import { init as initRisk } from './dashboards/risk-dashboard.js';
-import { init as initParty } from './dashboards/party-dashboard.js';
-import { init as initMinistry } from './dashboards/ministry-dashboard.js';
-import { init as initCoalitionLoader } from './dashboards/coalition-loader.js';
-import { init as initCoalitionDashboard } from './dashboards/coalition-dashboard.js';
-import { init as initCommittees } from './dashboards/committees-dashboard.js';
-import { init as initElectionCycle } from './dashboards/election-cycle.js';
-import { init as initSeasonalPatterns } from './dashboards/seasonal-patterns.js';
-import { init as initPreElection } from './dashboards/pre-election.js';
-import { init as initAnomalyDetection } from './dashboards/anomaly-detection.js';
-import { init as initPolitician } from './dashboards/politician-dashboard.js';
+
+// ─── Lazy Loading ─────────────────────────────────────────────────────────────
+import { initLazyDashboards } from './lazy-loader.js';
+import type { LazyDashboard } from './lazy-loader.js';
 
 import { logger } from './shared/logger.js';
 
-// ─── Dashboard Registry ─────────────────────────────────────────────────────
-// Each entry: [name, init function]
-// Order matters for perceived loading (stats & risk first as they're above the fold)
-const DASHBOARDS: Array<[string, () => Promise<void>]> = [
-  ['stats', initStats],
-  ['risk', initRisk],
-  ['coalition-loader', initCoalitionLoader],
-  ['party', initParty],
-  ['coalition-dashboard', initCoalitionDashboard],
-  ['committees', initCommittees],
-  ['ministry', initMinistry],
-  ['election-cycle', initElectionCycle],
-  ['seasonal-patterns', initSeasonalPatterns],
-  ['pre-election', initPreElection],
-  ['anomaly-detection', initAnomalyDetection],
-  ['politician', initPolitician],
+// ─── Lazy Dashboard Registry ─────────────────────────────────────────────────
+// Each entry triggers a dynamic import() only when the container scrolls into view.
+// The shared/register-globals.js (Chart.js, D3, PapaParse) is loaded as part of
+// the first lazy dashboard — subsequent imports reuse the cached ES module.
+const LAZY_DASHBOARDS: LazyDashboard[] = [
+  {
+    containerId: 'coalition-status',
+    loader: async () => {
+      await import('./shared/register-globals.js');
+      const { init } = await import('./dashboards/coalition-loader.js');
+      await init();
+    },
+  },
+  {
+    containerId: 'election-cycle-dashboard',
+    loader: async () => {
+      await import('./shared/register-globals.js');
+      const { init } = await import('./dashboards/election-cycle.js');
+      await init();
+    },
+  },
+  {
+    containerId: 'party-dashboard',
+    loader: async () => {
+      await import('./shared/register-globals.js');
+      const { init } = await import('./dashboards/party-dashboard.js');
+      await init();
+    },
+  },
+  {
+    containerId: 'committee-dashboard',
+    loader: async () => {
+      await import('./shared/register-globals.js');
+      const { init } = await import('./dashboards/committees-dashboard.js');
+      await init();
+    },
+  },
+  {
+    containerId: 'coalition-dashboard',
+    loader: async () => {
+      await import('./shared/register-globals.js');
+      const { init } = await import('./dashboards/coalition-dashboard.js');
+      await init();
+    },
+  },
+  {
+    containerId: 'seasonal-patterns-dashboard',
+    loader: async () => {
+      await import('./shared/register-globals.js');
+      const { init } = await import('./dashboards/seasonal-patterns.js');
+      await init();
+    },
+  },
+  {
+    containerId: 'pre-election-dashboard',
+    loader: async () => {
+      await import('./shared/register-globals.js');
+      const { init } = await import('./dashboards/pre-election.js');
+      await init();
+    },
+  },
+  {
+    containerId: 'anomaly-detection-dashboard',
+    loader: async () => {
+      await import('./shared/register-globals.js');
+      const { init } = await import('./dashboards/anomaly-detection.js');
+      await init();
+    },
+  },
+  {
+    containerId: 'ministry-dashboard',
+    loader: async () => {
+      await import('./shared/register-globals.js');
+      const { init } = await import('./dashboards/ministry-dashboard.js');
+      await init();
+    },
+  },
+  {
+    containerId: 'risk-dashboard',
+    loader: async () => {
+      await import('./shared/register-globals.js');
+      const { init } = await import('./dashboards/risk-dashboard.js');
+      await init();
+    },
+  },
+  {
+    containerId: 'politician-dashboard',
+    loader: async () => {
+      await import('./shared/register-globals.js');
+      const { init } = await import('./dashboards/politician-dashboard.js');
+      await init();
+    },
+  },
 ];
 
 // ─── Initialization ─────────────────────────────────────────────────────────
@@ -65,24 +131,19 @@ async function initAll(): Promise<void> {
   // Init UI components (sync, fast)
   initBackToTop();
 
-  // Init dashboards in parallel — each is independent
-  const results = await Promise.allSettled(
-    DASHBOARDS.map(async ([name, initFn]) => {
-      try {
-        await initFn();
-        logger.debug(`✓ ${name} initialized`);
-      } catch (error) {
-        logger.error(`✗ ${name} failed:`, error);
-        throw error;
-      }
-    }),
-  );
+  // Eager: stats loader populates hero metrics — no chart libraries needed
+  try {
+    await initStats();
+    logger.debug('✓ stats initialized');
+  } catch (error) {
+    logger.error('✗ stats failed:', error);
+  }
 
-  const succeeded = results.filter((r) => r.status === 'fulfilled').length;
-  const failed = results.filter((r) => r.status === 'rejected').length;
-  const elapsed = (performance.now() - start).toFixed(0);
+  // Lazy: chart-heavy dashboards load only when their section enters the viewport
+  initLazyDashboards(LAZY_DASHBOARDS);
 
-  logger.info(`Initialized ${succeeded}/${DASHBOARDS.length} dashboards in ${elapsed}ms${failed > 0 ? ` (${failed} failed)` : ''}`);
+  const elapsed = (performance.now() - start).toFixed(0);
+  logger.info(`Core initialized in ${elapsed}ms — ${LAZY_DASHBOARDS.length} dashboards pending lazy load`);
 }
 
 // Wait for DOM then initialize

styles.css

@@ -9967,12 +9967,31 @@ svg:focus-visible,
   border-radius: var(--border-radius-lg);
 }
 
+/* Chart container placeholder shown while a lazy dashboard module loads */
+.chart-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base)  25%,
+    var(--skeleton-shine) 50%,
+    var(--skeleton-base)  75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: var(--border-radius-lg, 8px);
+  min-height: 300px;
+  pointer-events: none;
+}
+
 /* Respect reduced-motion preference */
 @media (prefers-reduced-motion: reduce) {
   .skeleton {
     animation: none;
     opacity: 0.6;
   }
+  .chart-skeleton {
+    animation: none;
+    opacity: 0.6;
+  }
 }
 
 /* ── 2. Enhanced Card Styles (hover lift + focus-within ring) ───────────────── */