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
2026-07-19 21:00:51 +00:00
parent bb5750e928
commit 9e8f3c55d6
12 changed files with 247 additions and 61 deletions
@@ -51,7 +51,7 @@ import {
  parseUserLimits,
 } from "./lib/userLimits";
 import { createExcelExport, downloadBlob, parseExcelImport } from "./lib/excel";
-import { groupByDay, groupByFlavour, groupByWeek, humanDateTime, makeId } from "./lib/metrics";
+import { buildEntryDerived, groupByDay, groupByFlavour, groupByWeek, humanDateTime, makeId } from "./lib/metrics";
 import { exportPayload, parseImport } from "./lib/storage";
 import { useToasts } from "./lib/toasts";
 import type {
@@ -60,6 +60,7 @@ import type {
  EntryDraft,
  Filters,
  ImportPreview,
+  ImportProgress,
  RedBullEntry,
  SetupStatus,
  UserLimits,
@@ -101,6 +102,7 @@ function App() {
  const [busyAction, setBusyAction] = useState<string | null>(null);
  const [syncError, setSyncError] = useState("");
  const [importPreview, setImportPreview] = useState<ImportPreview | null>(null);
+  const [importProgress, setImportProgress] = useState<ImportProgress | null>(null);
  const [userLimits, setUserLimits] = useState<UserLimits>({});
  const [limitConfirmOpen, setLimitConfirmOpen] = useState(false);
  const [limitConfirmMessage, setLimitConfirmMessage] = useState("");
@@ -110,6 +112,8 @@ function App() {
  const { pushToast } = useToasts();
  const excelFileInputRef = useRef<HTMLInputElement>(null);
  const jsonFileInputRef = useRef<HTMLInputElement>(null);
+  const importInFlightRef = useRef(false);
+  const refreshDebounceRef = useRef<number | null>(null);

  useEffect(() => {
    localStorage.setItem(THEME_STORAGE_KEY, normaliseThemeId(themeId));
@@ -203,16 +207,33 @@ function App() {
  useEffect(() => {
    if (!user) return undefined;

+    // Trailing debounce: collapse bursts of row events (e.g. bulk imports) into one refetch.
+    const scheduleRefresh = () => {
+      if (refreshDebounceRef.current !== null) {
+        window.clearTimeout(refreshDebounceRef.current);
+      }
+      refreshDebounceRef.current = window.setTimeout(() => {
+        refreshDebounceRef.current = null;
+        void refreshEntries(user.$id, false);
+      }, 500);
+    };
+
    const unsubscribe = client.subscribe<Record<string, unknown>>(
      Channel.tablesdb(appwriteConfig.databaseId).table(appwriteConfig.collectionId).row(),
      (event) => {
-        if (event.payload?.userId === user.$id) {
-          void refreshEntries(user.$id, false);
-        }
+        // Bulk imports update local state directly; their row events need no refetch.
+        if (importInFlightRef.current) return;
+        if (event.payload?.userId === user.$id) scheduleRefresh();
      },
    );

-    return () => unsubscribe();
+    return () => {
+      if (refreshDebounceRef.current !== null) {
+        window.clearTimeout(refreshDebounceRef.current);
+        refreshDebounceRef.current = null;
+      }
+      unsubscribe();
+    };
  }, [refreshEntries, user]);

  useEffect(() => {
@@ -227,6 +248,7 @@ function App() {
    () => mergedFlavours(entries.map((entry) => entry.flavour)),
    [entries],
  );
+  const entryDerived = useMemo(() => buildEntryDerived(entries), [entries]);
  const entriesInView = useMemo(
    () => sortEntries(applyFilters(entries, filters)),
    [entries, filters],
@@ -538,14 +560,18 @@ function App() {

    setBusyAction("confirm-excel-import");
    setSyncError("");
+    importInFlightRef.current = true;
+    setImportProgress({ done: 0, total: drafts.length });
    try {
-      const saved = await createEntries(user.$id, drafts);
+      const saved = await createEntries(user.$id, drafts, (done, total) => setImportProgress({ done, total }));
      setEntries((current) => sortEntries([...saved, ...current]));
      setImportPreview(null);
      setNotice(`${saved.length} Excel row${saved.length === 1 ? "" : "s"} saved to Appwrite.`);
    } catch (error) {
      setSyncError(appwriteErrorMessage(error));
    } finally {
+      importInFlightRef.current = false;
+      setImportProgress(null);
      setBusyAction(null);
    }
  }
@@ -567,12 +593,13 @@ function App() {
        setNotice("No new JSON entries found.");
        return;
      }
+      importInFlightRef.current = true;
      const saved = await createEntries(user.$id, uniqueDrafts.map((draft) => ({ ...draft, source: "json" })));
-      setEntries((current) => sortEntries([...saved, ...current]));
-      setNotice(`${saved.length} JSON entr${saved.length === 1 ? "y" : "ies"} saved to Appwrite.`);
+      setEntries((current) => sortEntries([...saved, ...current]));      setNotice(`${saved.length} JSON entr${saved.length === 1 ? "y" : "ies"} saved to Appwrite.`);
    } catch (error) {
      setSyncError(error instanceof Error ? error.message : "JSON import failed.");
    } finally {
+      importInFlightRef.current = false;
      if (jsonFileInputRef.current) jsonFileInputRef.current.value = "";
      setBusyAction(null);
    }
@@ -675,6 +702,7 @@ function App() {
                  user={user}
                  userLimits={userLimits}
                  limitCheck={limitCheck}
+                  loading={dataLoading}
                  onQuickAdd={(item) => void quickAdd(item)}
                  onAdd={openNewEntry}
                  onScan={openBarcodeScanner}
@@ -687,8 +715,10 @@ function App() {
                <LogbookView
                  entries={entriesInView}
                  totalEntries={entries.length}
+                  entryDerived={entryDerived}
                  filters={filters}
                  flavours={allFlavours}
+                  loading={dataLoading}
                  deletingId={deletingId}
                  onFilterChange={setFilters}
                  onAdd={openNewEntry}
@@ -711,6 +741,7 @@ function App() {
                  filters={filters}
                  flavours={allFlavours}
                  userLimits={userLimits}
+                  loading={dataLoading}
                  onFilterChange={setFilters}
                  onSaveLimits={(next) => void saveUserLimits(next)}
                />
@@ -781,6 +812,7 @@ function App() {
      <ImportPreviewModal
        busy={busyAction === "confirm-excel-import"}
        preview={importPreview}
+        importProgress={importProgress}
        onClose={() => setImportPreview(null)}
        onConfirm={() => void confirmExcelImport()}
      />
@@ -1,5 +1,5 @@
 import { Edit3, Loader2, RotateCcw, Trash2 } from "lucide-react";
-import { useMemo, type CSSProperties } from "react";
+import { useEffect, useMemo, useState, type CSSProperties } from "react";
 import {
  caffeineFor,
  currency,
@@ -11,11 +11,18 @@ import {
 } from "../lib/metrics";
 import { AppCard } from "./AppCard";
 import { EmptyState } from "./EmptyState";
-import type { RedBullEntry } from "../types";
+import { Skeleton } from "./Skeleton";
+import type { EntryDerived, Filters, RedBullEntry } from "../types";
+
+const PAGE_SIZE = 50;
+const SKELETON_ROWS = 6;

 type EntryLedgerProps = {
  entries: RedBullEntry[];
  totalEntries: number;
+  entryDerived: Map<string, EntryDerived>;
+  filters: Filters;
+  loading: boolean;
  deletingId: string | null;
  onAdd: () => void;
  onEdit: (entry: RedBullEntry) => void;
@@ -32,36 +39,74 @@ type DayGroup = {
  entries: RedBullEntry[];
 };

-export function EntryLedger({ entries, totalEntries, deletingId, onAdd, onEdit, onDelete, onLogAgain }: EntryLedgerProps) {
-  const dayGroups = useMemo(() => groupEntriesByDay(entries), [entries]);
+export function EntryLedger({
+  entries,
+  totalEntries,
+  entryDerived,
+  filters,
+  loading,
+  deletingId,
+  onAdd,
+  onEdit,
+  onDelete,
+  onLogAgain,
+}: EntryLedgerProps) {
+  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
+
+  useEffect(() => {
+    setVisibleCount(PAGE_SIZE);
+  }, [filters]);
+
+  const visibleEntries = useMemo(() => entries.slice(0, visibleCount), [entries, visibleCount]);
+  const dayGroups = useMemo(() => groupEntriesByDay(visibleEntries, entryDerived), [visibleEntries, entryDerived]);
+  const showSkeleton = loading && entries.length === 0;
+  const remaining = entries.length - visibleEntries.length;

  return (
    <AppCard title="Entries" subtitle={`${entries.length} visible of ${totalEntries}`}>
-      {entries.length ? (
-        <div className="grid gap-4">
-          {dayGroups.map((group) => (
-            <section className="day-group" key={group.key} aria-label={group.label}>
-              <div className="day-group-header">
-                <h3 className="day-group-title">{group.label}</h3>
-                <p className="day-group-subtotals">
-                  {oneDecimal.format(group.cans)} can{group.cans === 1 ? "" : "s"} · {wholeNumber.format(group.caffeine)}mg · {currency.format(group.spend)}
-                </p>
-              </div>
-              <div className="grid gap-2">
-                {group.entries.map((entry) => (
-                  <EntryRow
-                    key={entry.id}
-                    entry={entry}
-                    deleting={deletingId === entry.id}
-                    onEdit={onEdit}
-                    onDelete={onDelete}
-                    onLogAgain={onLogAgain}
-                  />
-                ))}
-              </div>
-            </section>
+      {showSkeleton ? (
+        <div className="grid gap-2">
+          {Array.from({ length: SKELETON_ROWS }, (_, index) => (
+            <Skeleton key={index} className="h-24" />
          ))}
        </div>
+      ) : entries.length ? (
+        <>
+          <div className="grid gap-4">
+            {dayGroups.map((group) => (
+              <section className="day-group" key={group.key} aria-label={group.label}>
+                <div className="day-group-header">
+                  <h3 className="day-group-title">{group.label}</h3>
+                  <p className="day-group-subtotals">
+                    {oneDecimal.format(group.cans)} can{group.cans === 1 ? "" : "s"} · {wholeNumber.format(group.caffeine)}mg · {currency.format(group.spend)}
+                  </p>
+                </div>
+                <div className="grid gap-2">
+                  {group.entries.map((entry) => (
+                    <EntryRow
+                      key={entry.id}
+                      entry={entry}
+                      derived={derivedFor(entryDerived, entry)}
+                      deleting={deletingId === entry.id}
+                      onEdit={onEdit}
+                      onDelete={onDelete}
+                      onLogAgain={onLogAgain}
+                    />
+                  ))}
+                </div>
+              </section>
+            ))}
+          </div>
+          {remaining > 0 ? (
+            <button
+              className="list-button mt-4 w-full"
+              type="button"
+              onClick={() => setVisibleCount((count) => count + PAGE_SIZE)}
+            >
+              Load {Math.min(PAGE_SIZE, remaining)} more — {remaining} remaining
+            </button>
+          ) : null}
+        </>
      ) : (
        <EmptyState title="No entries found" copy="Add your first intake or clear the current filters." actionLabel="Add intake" onAction={onAdd} />
      )}
@@ -71,12 +116,14 @@ export function EntryLedger({ entries, totalEntries, deletingId, onAdd, onEdit,

 function EntryRow({
  entry,
+  derived,
  deleting,
  onEdit,
  onDelete,
  onLogAgain,
 }: {
  entry: RedBullEntry;
+  derived: EntryDerived;
  deleting: boolean;
  onEdit: (entry: RedBullEntry) => void;
  onDelete: (id: string) => void;
@@ -98,7 +145,7 @@ function EntryRow({
          {entry.store ? ` · ${entry.store}` : ""}
        </p>
        <p className="entry-summary mt-2">
-          {currency.format(spendFor(entry))} · {wholeNumber.format(caffeineFor(entry))}mg caffeine · {oneDecimal.format(sugarFor(entry))}g sugar
+          {currency.format(derived.spend)} · {wholeNumber.format(derived.caffeine)}mg caffeine · {oneDecimal.format(derived.sugar)}g sugar
        </p>
        {entry.notes ? <p className="entry-meta mt-2 leading-6">{entry.notes}</p> : null}
      </div>
@@ -127,7 +174,7 @@ function EntryRow({
  );
 }

-function groupEntriesByDay(entries: RedBullEntry[]): DayGroup[] {
+function groupEntriesByDay(entries: RedBullEntry[], entryDerived: Map<string, EntryDerived>): DayGroup[] {
  const groups: DayGroup[] = [];
  const byKey = new Map<string, DayGroup>();

@@ -140,15 +187,20 @@ function groupEntriesByDay(entries: RedBullEntry[]): DayGroup[] {
      byKey.set(key, group);
      groups.push(group);
    }
+    const derived = derivedFor(entryDerived, entry);
    group.entries.push(entry);
    group.cans += entry.cans;
-    group.caffeine += caffeineFor(entry);
-    group.spend += spendFor(entry);
+    group.caffeine += derived.caffeine;
+    group.spend += derived.spend;
  });

  return groups;
 }

+function derivedFor(entryDerived: Map<string, EntryDerived>, entry: RedBullEntry): EntryDerived {
+  return entryDerived.get(entry.id) ?? { spend: spendFor(entry), caffeine: caffeineFor(entry), sugar: sugarFor(entry) };
+}
+
 function dayLabel(key: string) {
  const todayKey = formatDateKey(new Date());
  const yesterday = new Date();
@@ -4,11 +4,12 @@ import { humanDateTime } from "../lib/metrics";
 import { MODAL_TRANSITION } from "../lib/motion";
 import { MiniMetric } from "./MetricTiles";
 import { Modal } from "./Modal";
-import type { ImportPreview, ImportPreviewRow } from "../types";
+import type { ImportPreview, ImportPreviewRow, ImportProgress } from "../types";

 type ImportPreviewModalProps = {
  busy: boolean;
  preview: ImportPreview | null;
+  importProgress: ImportProgress | null;
  onClose: () => void;
  onConfirm: () => void;
 };
@@ -16,6 +17,7 @@ type ImportPreviewModalProps = {
 export function ImportPreviewModal({
  busy,
  preview,
+  importProgress,
  onClose,
  onConfirm,
 }: ImportPreviewModalProps) {
@@ -101,7 +103,12 @@ export function ImportPreviewModal({
            ))}
          </div>

-          <div className="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+          <div className="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end">
+            {busy && importProgress ? (
+              <p className="text-center text-sm text-slate-400 sm:mr-auto" role="status" aria-live="polite">
+                Importing {importProgress.done} of {importProgress.total}…
+              </p>
+            ) : null}
            <button className="secondary-button justify-center" type="button" onClick={onClose}>
              Cancel
            </button>
@@ -0,0 +1,7 @@
+type SkeletonProps = {
+  className?: string;
+};
+
+export function Skeleton({ className = "" }: SkeletonProps) {
+  return <div className={className ? `skeleton ${className}` : "skeleton"} aria-hidden="true" />;
+}
@@ -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}
@@ -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} />
@@ -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 }}>
@@ -1972,6 +1972,29 @@ textarea:focus-visible {
  background: color-mix(in srgb, var(--text, #202124) 6%, transparent);
 }

+/* --- Skeleton loading placeholders (B3) --- */
+
+.skeleton {
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--text, #202124) 8%, transparent);
+}
+
+@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .skeleton {
+    animation: skeleton-pulse 1.6s ease-in-out infinite;
+  }
+}
+
 /* --- Motion & interaction language (A6) --- */

 /* Neutralize CSS transitions/animations for reduced-motion users. */
@@ -59,10 +59,15 @@ export async function createEntry(userId: string, draft: EntryDraft) {
  return fromRow(row);
 }

-export async function createEntries(userId: string, drafts: EntryDraft[]) {
+export async function createEntries(
+  userId: string,
+  drafts: EntryDraft[],
+  onProgress?: (done: number, total: number) => void,
+) {
  const saved: RedBullEntry[] = [];
-  for (const draft of drafts) {
+  for (const [index, draft] of drafts.entries()) {
    saved.push(await createEntry(userId, draft));
+    onProgress?.(index + 1, drafts.length);
  }
  return saved;
 }
@@ -1,4 +1,4 @@
-import ExcelJS from "exceljs";
+import type ExcelJS from "exceljs";
 import { flavourMeta } from "../data/flavours";
 import type { EntryDraft, ImportPreview, ImportPreviewRow, RedBullEntry } from "../types";
 import {
@@ -39,6 +39,7 @@ const ENTRY_COLUMNS = [
 ] as const;

 export async function createExcelExport(entries: RedBullEntry[]) {
+  const { default: ExcelJS } = await import("exceljs");
  const workbook = new ExcelJS.Workbook();
  workbook.creator = "Red Bull Intake Tracker";
  workbook.created = new Date();
@@ -53,6 +54,7 @@ export async function createExcelExport(entries: RedBullEntry[]) {
 }

 export async function parseExcelImport(file: File, existingEntries: RedBullEntry[]): Promise<ImportPreview> {
+  const { default: ExcelJS } = await import("exceljs");
  const workbook = new ExcelJS.Workbook();
  await workbook.xlsx.load(await file.arrayBuffer());

@@ -1,4 +1,4 @@
-import type { BuiltInSize, RedBullEntry } from "../types";
+import type { BuiltInSize, EntryDerived, RedBullEntry } from "../types";

 export const CAFFEINE_PER_250ML = 80;
 export const SUGAR_PER_250ML = 27;
@@ -53,6 +53,18 @@ export function sugarFor(entry: RedBullEntry) {
  return entry.cans * (entry.sizeMl / 250) * SUGAR_PER_250ML;
 }

+export function buildEntryDerived(entries: RedBullEntry[]) {
+  const derived = new Map<string, EntryDerived>();
+  entries.forEach((entry) => {
+    derived.set(entry.id, {
+      spend: spendFor(entry),
+      caffeine: caffeineFor(entry),
+      sugar: sugarFor(entry),
+    });
+  });
+  return derived;
+}
+
 export function startOfDay(date: Date) {
  const next = new Date(date);
  next.setHours(0, 0, 0, 0);
@@ -114,6 +114,17 @@ export type ImportPreview = {
  rows: ImportPreviewRow[];
 };

+export type ImportProgress = {
+  done: number;
+  total: number;
+};
+
+export type EntryDerived = {
+  spend: number;
+  caffeine: number;
+  sugar: number;
+};
+
 export type UserLimits = {
  dailyCanLimit?: number;
  dailySpendLimit?: number;