perf: logbook memoization and pagination, debounced realtime, lazy exceljs

- Precompute per-entry spend/caffeine/sugar map; paginate ledger at 50 rows
- Debounce realtime refetches (500ms trailing) and suppress during bulk import
- Show import progress (Importing X of N)
- Dynamic-import exceljs: entry chunk 1640 -> 700 kB
- Skeleton placeholders for initial load on Overview/Trends/Logbook

src/components/views/LogbookView.tsx

@@ -1,13 +1,15 @@
 import { EntryLedger } from "../EntryLedger";
 import { FiltersPanel } from "../FiltersPanel";
 import { LegalFootnote } from "../LegalFootnote";
-import type { Filters, Flavour, RedBullEntry } from "../../types";
+import type { EntryDerived, Filters, Flavour, RedBullEntry } from "../../types";
 
 type LogbookViewProps = {
   entries: RedBullEntry[];
   totalEntries: number;
+  entryDerived: Map<string, EntryDerived>;
   filters: Filters;
   flavours: Flavour[];
+  loading: boolean;
   deletingId: string | null;
   onFilterChange: (filters: Filters) => void;
   onAdd: () => void;
@@ -19,8 +21,10 @@ type LogbookViewProps = {
 export function LogbookView({
   entries,
   totalEntries,
+  entryDerived,
   filters,
   flavours,
+  loading,
   deletingId,
   onFilterChange,
   onAdd,
@@ -35,6 +39,9 @@ export function LogbookView({
         <EntryLedger
           entries={entries}
           totalEntries={totalEntries}
+          entryDerived={entryDerived}
+          filters={filters}
+          loading={loading}
           deletingId={deletingId}
           onAdd={onAdd}
           onEdit={onEdit}

src/components/views/OverviewView.tsx

@@ -24,6 +24,7 @@ import { InsightCard } from "../InsightCard";
 import { LegalFootnote } from "../LegalFootnote";
 import { MetricTile } from "../MetricTiles";
 import { QuickAddPanel } from "../QuickAddPanel";
+import { Skeleton } from "../Skeleton";
 import { TodayPanel } from "../TodayPanel";
 import type { Dashboard, Insight } from "../../lib/dashboard";
 import type { AuthUser, LimitCheckResult, RedBullEntry, UserLimits } from "../../types";
@@ -39,6 +40,7 @@ type OverviewViewProps = {
   user: AuthUser;
   userLimits: UserLimits;
   limitCheck: LimitCheckResult;
+  loading: boolean;
   onQuickAdd: (item: QuickAddItem) => void;
   onAdd: () => void;
   onScan: () => void;
@@ -57,6 +59,7 @@ export function OverviewView({
   user,
   userLimits,
   limitCheck,
+  loading,
   onQuickAdd,
   onAdd,
   onScan,
@@ -64,6 +67,7 @@ export function OverviewView({
   onOpenSettings,
 }: OverviewViewProps) {
   const todaySpendRaw = limitCheck.todaySpend;
+  const showSkeleton = loading && entries.length === 0;
   const spendLimitDetail =
     userLimits.dailySpendLimit != null
       ? `${currency.format(todaySpendRaw)} of ${currency.format(userLimits.dailySpendLimit)} today`
@@ -102,21 +106,29 @@ export function OverviewView({
       ) : null}
 
       <section className="overview-metrics-grid grid gap-3">
-        <MetricTile icon={CalendarDays} label="This month" value={summary.monthCans} detail={`${summary.monthSpend} spent`} accent={MATERIAL_ACCENTS.primary} />
-        <MetricTile
-          icon={PoundSterling}
-          label={userLimits.dailySpendLimit != null ? "Today's budget" : "Total spend"}
-          value={userLimits.dailySpendLimit != null ? currency.format(todaySpendRaw) : summary.totalSpend}
-          detail={spendLimitDetail}
-          accent={MATERIAL_ACCENTS.secondary}
-        />
-        <MetricTile icon={Activity} label="Favourite" value={summary.favouriteFlavour} detail="by total cans" accent={MATERIAL_ACCENTS.tertiary} />
-        <MetricTile icon={TimerReset} label="Days without" value={summary.daysWithoutRedBull} detail={`${summary.currentStreak} day streak`} accent={MATERIAL_ACCENTS.error} />
+        {showSkeleton ? (
+          Array.from({ length: 4 }, (_, index) => <Skeleton key={index} className="h-28" />)
+        ) : (
+          <>
+            <MetricTile icon={CalendarDays} label="This month" value={summary.monthCans} detail={`${summary.monthSpend} spent`} accent={MATERIAL_ACCENTS.primary} />
+            <MetricTile
+              icon={PoundSterling}
+              label={userLimits.dailySpendLimit != null ? "Today's budget" : "Total spend"}
+              value={userLimits.dailySpendLimit != null ? currency.format(todaySpendRaw) : summary.totalSpend}
+              detail={spendLimitDetail}
+              accent={MATERIAL_ACCENTS.secondary}
+            />
+            <MetricTile icon={Activity} label="Favourite" value={summary.favouriteFlavour} detail="by total cans" accent={MATERIAL_ACCENTS.tertiary} />
+            <MetricTile icon={TimerReset} label="Days without" value={summary.daysWithoutRedBull} detail={`${summary.currentStreak} day streak`} accent={MATERIAL_ACCENTS.error} />
+          </>
+        )}
       </section>
 
       <section className="overview-charts-grid grid gap-4">
         <AppCard title="Spend overview" subtitle="Last 30 logged days">
-          {chartData.length ? (
+          {showSkeleton ? (
+            <Skeleton className="chart-shell chart-shell--area" />
+          ) : chartData.length ? (
             <div className="chart-shell chart-shell--area" role="img" aria-label={spendChartLabel}>
             <ResponsiveContainer width="100%" height="100%">
               <AreaChart data={chartData} margin={{ top: 12, right: 12, bottom: 0, left: -18 }}>
@@ -140,7 +152,13 @@ export function OverviewView({
         </AppCard>
 
         <AppCard title="Recent entries" subtitle={`${recentEntries.length} shown`}>
-          {recentEntries.length ? (
+          {showSkeleton ? (
+            <div className="grid gap-2">
+              {Array.from({ length: 5 }, (_, index) => (
+                <Skeleton key={index} className="h-12" />
+              ))}
+            </div>
+          ) : recentEntries.length ? (
             <div className="grid gap-2">
               {recentEntries.map((entry) => (
                 <MiniEntry key={entry.id} entry={entry} />

src/components/views/TrendsView.tsx

@@ -21,6 +21,7 @@ import { EmptyState } from "../EmptyState";
 import { FiltersPanel } from "../FiltersPanel";
 import { InsightCard } from "../InsightCard";
 import { LegalFootnote } from "../LegalFootnote";
+import { Skeleton } from "../Skeleton";
 import { SpendForecastCard } from "../SpendForecastCard";
 import type { Insight } from "../../lib/dashboard";
 import type { Filters, Flavour, RedBullEntry, UserLimits } from "../../types";
@@ -43,6 +44,7 @@ type TrendsViewProps = {
   filters: Filters;
   flavours: Flavour[];
   userLimits: UserLimits;
+  loading: boolean;
   onFilterChange: (filters: Filters) => void;
   onSaveLimits: (limits: UserLimits) => void;
 };
@@ -56,9 +58,11 @@ export function TrendsView({
   filters,
   flavours,
   userLimits,
+  loading,
   onFilterChange,
   onSaveLimits,
 }: TrendsViewProps) {
+  const showSkeleton = loading && entries.length === 0;
   const totalSpend = chartData.reduce((total, point) => total + point.spend, 0);
   const totalCans = chartData.reduce((total, point) => total + point.cans, 0);
   const totalCaffeine = chartData.reduce((total, point) => total + point.caffeine, 0);
@@ -77,7 +81,9 @@ export function TrendsView({
       <section className="logbook-layout grid gap-4">
         <FiltersPanel filters={filters} flavours={flavours} onChange={onFilterChange} compact />
         <AppCard title="Cans and spend" subtitle={`${entries.length} entries in view`}>
-          {chartData.length ? (
+          {showSkeleton ? (
+            <Skeleton className="h-[300px]" />
+          ) : chartData.length ? (
             <div role="img" aria-label={cansSpendLabel}>
               <ResponsiveContainer width="100%" height={CHART_HEIGHT}>
                 <AreaChart data={chartData} margin={{ top: 12, right: 16, bottom: 0, left: -12 }}>
@@ -108,7 +114,9 @@ export function TrendsView({
 
       <section className="grid gap-4 xl:grid-cols-2">
         <AppCard title="Caffeine by day" subtitle="Estimated mg">
-          {chartData.length ? (
+          {showSkeleton ? (
+            <Skeleton className="h-[300px]" />
+          ) : chartData.length ? (
             <div role="img" aria-label={caffeineLabel}>
               <ResponsiveContainer width="100%" height={CHART_HEIGHT}>
                 <BarChart data={chartData} margin={{ top: 12, right: 16, bottom: 0, left: -12 }}>
@@ -126,7 +134,9 @@ export function TrendsView({
         </AppCard>
 
         <AppCard title="Weekly comparison" subtitle="Spend and cans">
-          {weekData.length ? (
+          {showSkeleton ? (
+            <Skeleton className="h-[300px]" />
+          ) : weekData.length ? (
             <div role="img" aria-label={weekLabel}>
               <ResponsiveContainer width="100%" height={CHART_HEIGHT}>
                 <RechartsLineChart data={weekData} margin={{ top: 12, right: 16, bottom: 0, left: -12 }}>