V1.12.2: fewer reloads, smaller downloads

- An action in an encounter no longer loads the encounter again: the
  answer to the action already holds it. Live updates that arrive
  together are answered with one reload, of the encounter or character
  that changed, where each used to reload every one on screen.
- Everything the site sends is compressed. Nothing in front of it did
  that (frp only tunnels), so the API and the built site now do it
  themselves: the main script is 100 kB on the wire, down from 330 kB.
- Each page is its own download, fetched the first time it is opened,
  so signing in does not wait on the encounter tracker or the builder.
- The library is fetched when one of its pickers is opened, where the
  campaign page used to fetch it on every visit by the DM.
- The database has indexes on the columns every list is looked up by,
  and checking that someone is in a campaign takes one query, not two.
- On a server: "npm install", then "npm run deploy", then build the
  frontend again and restart both.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "1.12.1",
+  "version": "1.12.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,10 +18,12 @@
     "socket.io-client": "^4.8.3"
   },
   "devDependencies": {
+    "@types/compression": "^1.8.1",
     "@types/node": "^24.13.3",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.7",
     "@vitejs/plugin-react": "^6.1.1",
+    "compression": "^1.8.2",
     "oxlint": "^1.81.0",
     "typescript": "~7.0.2",
     "vite": "^8.3.0"

frontend/src/App.tsx

@@ -1,35 +1,41 @@
+import { lazy, Suspense } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { Layout } from './components/Layout';
 import { ProtectedRoute } from './components/ProtectedRoute';
 import { LoginPage } from './pages/LoginPage';
-import { RegisterPage } from './pages/RegisterPage';
-import { CampaignListPage } from './pages/CampaignListPage';
-import { CampaignHomePage } from './pages/CampaignHomePage';
-import { PartyOverviewPage } from './pages/PartyOverviewPage';
-import { CharacterSheetPage } from './pages/CharacterSheetPage';
-import { CharacterBuilderPage } from './pages/CharacterBuilderPage';
-import { EncounterPage } from './pages/EncounterPage';
-import { AccountPage } from './pages/AccountPage';
+
+// Each page is its own file to download, fetched the first time it is opened,
+// so signing in does not wait on the encounter tracker or the character builder.
+const RegisterPage = lazy(() => import('./pages/RegisterPage').then((m) => ({ default: m.RegisterPage })));
+const CampaignListPage = lazy(() => import('./pages/CampaignListPage').then((m) => ({ default: m.CampaignListPage })));
+const CampaignHomePage = lazy(() => import('./pages/CampaignHomePage').then((m) => ({ default: m.CampaignHomePage })));
+const PartyOverviewPage = lazy(() => import('./pages/PartyOverviewPage').then((m) => ({ default: m.PartyOverviewPage })));
+const CharacterSheetPage = lazy(() => import('./pages/CharacterSheetPage').then((m) => ({ default: m.CharacterSheetPage })));
+const CharacterBuilderPage = lazy(() => import('./pages/CharacterBuilderPage').then((m) => ({ default: m.CharacterBuilderPage })));
+const EncounterPage = lazy(() => import('./pages/EncounterPage').then((m) => ({ default: m.EncounterPage })));
+const AccountPage = lazy(() => import('./pages/AccountPage').then((m) => ({ default: m.AccountPage })));
 
 function App() {
   return (
-    <Routes>
-      <Route path="/login" element={<LoginPage />} />
-      <Route path="/register" element={<RegisterPage />} />
-      <Route element={<ProtectedRoute />}>
-        <Route element={<Layout />}>
-          <Route path="/" element={<Navigate to="/campaigns" replace />} />
-          <Route path="/campaigns" element={<CampaignListPage />} />
-          <Route path="/campaigns/:campaignId" element={<CampaignHomePage />} />
-          <Route path="/campaigns/:campaignId/party" element={<PartyOverviewPage />} />
-          <Route path="/characters/:characterId" element={<CharacterSheetPage />} />
-          <Route path="/characters/:characterId/build" element={<CharacterBuilderPage />} />
-          <Route path="/encounters/:encounterId" element={<EncounterPage />} />
-          <Route path="/account" element={<AccountPage />} />
+    <Suspense fallback={null}>
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/register" element={<RegisterPage />} />
+        <Route element={<ProtectedRoute />}>
+          <Route element={<Layout />}>
+            <Route path="/" element={<Navigate to="/campaigns" replace />} />
+            <Route path="/campaigns" element={<CampaignListPage />} />
+            <Route path="/campaigns/:campaignId" element={<CampaignHomePage />} />
+            <Route path="/campaigns/:campaignId/party" element={<PartyOverviewPage />} />
+            <Route path="/characters/:characterId" element={<CharacterSheetPage />} />
+            <Route path="/characters/:characterId/build" element={<CharacterBuilderPage />} />
+            <Route path="/encounters/:encounterId" element={<EncounterPage />} />
+            <Route path="/account" element={<AccountPage />} />
+          </Route>
         </Route>
-      </Route>
-      <Route path="*" element={<Navigate to="/" replace />} />
-    </Routes>
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </Suspense>
   );
 }
 

frontend/src/api/queries.ts

@@ -735,12 +735,21 @@ export function useEncounter(encounterId: string | undefined) {
   });
 }
 
+// Every change to an encounter is answered with the encounter as this viewer
+// sees it, so the cache takes that as it is: no second request for what just
+// came back.
+function keepEncounter(qc: QueryClient, encounterId: string, data: unknown) {
+  const encounter = (data as { encounter?: Encounter } | undefined)?.encounter;
+  if (encounter) qc.setQueryData(['encounter', encounterId], encounter);
+  else qc.invalidateQueries({ queryKey: ['encounter', encounterId] });
+}
+
 export function useAddParticipant(encounterId: string) {
   const qc = useQueryClient();
   return useMutation({
     mutationFn: async (data: { characterId?: string; monsterId?: string; npcId?: string; displayName?: string; initiativeRoll?: number }) =>
       (await apiClient.post(`/encounters/${encounterId}/participants`, data)).data,
-    onSuccess: () => qc.invalidateQueries({ queryKey: ['encounter', encounterId] }),
+    onSuccess: (data) => keepEncounter(qc, encounterId, data),
   });
 }
 
@@ -749,7 +758,7 @@ export function usePatchParticipant(encounterId: string) {
   return useMutation({
     mutationFn: async ({ participantId, ...data }: Partial<EncounterParticipant> & { participantId: string }) =>
       (await apiClient.patch(`/encounters/${encounterId}/participants/${participantId}`, data)).data,
-    onSuccess: () => qc.invalidateQueries({ queryKey: ['encounter', encounterId] }),
+    onSuccess: (data) => keepEncounter(qc, encounterId, data),
   });
 }
 
@@ -757,8 +766,8 @@ export function useRemoveParticipant(encounterId: string) {
   const qc = useQueryClient();
   return useMutation({
     mutationFn: async (participantId: string) =>
-      apiClient.delete(`/encounters/${encounterId}/participants/${participantId}`),
-    onSuccess: () => qc.invalidateQueries({ queryKey: ['encounter', encounterId] }),
+      (await apiClient.delete(`/encounters/${encounterId}/participants/${participantId}`)).data,
+    onSuccess: (data) => keepEncounter(qc, encounterId, data),
   });
 }
 
@@ -766,7 +775,7 @@ export function useAdvanceRound(encounterId: string) {
   const qc = useQueryClient();
   return useMutation({
     mutationFn: async () => (await apiClient.post(`/encounters/${encounterId}/advance-round`)).data,
-    onSuccess: () => qc.invalidateQueries({ queryKey: ['encounter', encounterId] }),
+    onSuccess: (data) => keepEncounter(qc, encounterId, data),
   });
 }
 
@@ -781,8 +790,8 @@ export function usePatchEncounter(encounterId: string) {
       dmNotes?: string | null;
       locationId?: string | null;
     }) => (await apiClient.patch(`/encounters/${encounterId}`, data)).data,
-    onSuccess: (_data, variables) => {
-      qc.invalidateQueries({ queryKey: ['encounter', encounterId] });
+    onSuccess: (data, variables) => {
+      keepEncounter(qc, encounterId, data);
       // The campaign page lists encounters by name, mode and status, and an
       // encounter in progress carries its characters to its location.
       if (variables.status || variables.mode || variables.name || variables.locationId !== undefined) {
@@ -800,7 +809,7 @@ export function useSetTargets(encounterId: string) {
   const qc = useQueryClient();
   return useMutation({
     mutationFn: async (participantIds: string[]) => (await apiClient.put(`/encounters/${encounterId}/targets`, { participantIds })).data,
-    onSuccess: () => qc.invalidateQueries({ queryKey: ['encounter', encounterId] }),
+    onSuccess: (data) => keepEncounter(qc, encounterId, data),
   });
 }
 
@@ -810,8 +819,8 @@ export function useReviveParticipant(encounterId: string) {
   const qc = useQueryClient();
   return useMutation({
     mutationFn: async (participantId: string) => (await apiClient.post(`/encounters/${encounterId}/participants/${participantId}/revive`)).data,
-    onSuccess: () => {
-      qc.invalidateQueries({ queryKey: ['encounter', encounterId] });
+    onSuccess: (data) => {
+      keepEncounter(qc, encounterId, data);
       qc.invalidateQueries({ queryKey: ['character'] }); // the revived character's sheet
     },
   });
@@ -821,7 +830,7 @@ export function useNextTurn(encounterId: string) {
   const qc = useQueryClient();
   return useMutation({
     mutationFn: async () => (await apiClient.post(`/encounters/${encounterId}/next-turn`)).data,
-    onSuccess: () => qc.invalidateQueries({ queryKey: ['encounter', encounterId] }),
+    onSuccess: (data) => keepEncounter(qc, encounterId, data),
   });
 }
 
@@ -838,15 +847,15 @@ export function useAddReward(encounterId: string) {
   const qc = useQueryClient();
   return useMutation({
     mutationFn: async (data: NewReward) => (await apiClient.post(`/encounters/${encounterId}/rewards`, data)).data,
-    onSuccess: () => qc.invalidateQueries({ queryKey: ['encounter', encounterId] }),
+    onSuccess: (data) => keepEncounter(qc, encounterId, data),
   });
 }
 
 export function useDeleteReward(encounterId: string) {
   const qc = useQueryClient();
   return useMutation({
-    mutationFn: async (rewardId: string) => apiClient.delete(`/encounters/${encounterId}/rewards/${rewardId}`),
-    onSuccess: () => qc.invalidateQueries({ queryKey: ['encounter', encounterId] }),
+    mutationFn: async (rewardId: string) => (await apiClient.delete(`/encounters/${encounterId}/rewards/${rewardId}`)).data,
+    onSuccess: (data) => keepEncounter(qc, encounterId, data),
   });
 }
 
@@ -857,8 +866,8 @@ export function useAwardReward(encounterId: string) {
   return useMutation({
     mutationFn: async ({ rewardId, ...target }: { rewardId: string } & ({ characterId: string } | { split: true })) =>
       (await apiClient.post(`/encounters/${encounterId}/rewards/${rewardId}/award`, target)).data,
-    onSuccess: () => {
-      qc.invalidateQueries({ queryKey: ['encounter', encounterId] });
+    onSuccess: (data) => {
+      keepEncounter(qc, encounterId, data);
       qc.invalidateQueries({ queryKey: ['character'] });
       qc.invalidateQueries({ queryKey: ['campaign'] });
     },
@@ -927,8 +936,8 @@ export function useDeleteWare(campaignId: string) {
 }
 
 // Both change what a character holds, so the sheet and the party list refresh too.
-function invalidateAfterTrade(qc: QueryClient, encounterId: string) {
-  qc.invalidateQueries({ queryKey: ['encounter', encounterId] });
+function invalidateAfterTrade(qc: QueryClient, encounterId: string, data: unknown) {
+  keepEncounter(qc, encounterId, data);
   qc.invalidateQueries({ queryKey: ['character'] });
   qc.invalidateQueries({ queryKey: ['campaign'] });
 }
@@ -939,7 +948,7 @@ export function useExchangeWithNpc(encounterId: string) {
   return useMutation({
     mutationFn: async (data: { characterId: string; npcId: string; from: 'GOLD' | 'CASH'; amount: number }) =>
       (await apiClient.post<{ received: number; currency: Currency }>(`/encounters/${encounterId}/exchange`, data)).data,
-    onSuccess: () => invalidateAfterTrade(qc, encounterId),
+    onSuccess: (data) => invalidateAfterTrade(qc, encounterId, data),
   });
 }
 
@@ -948,7 +957,7 @@ export function useBuyWare(encounterId: string) {
   return useMutation({
     mutationFn: async ({ wareId, ...data }: { wareId: string; characterId: string; quantity?: number }) =>
       (await apiClient.post(`/encounters/${encounterId}/wares/${wareId}/buy`, data)).data,
-    onSuccess: () => invalidateAfterTrade(qc, encounterId),
+    onSuccess: (data) => invalidateAfterTrade(qc, encounterId, data),
   });
 }
 

frontend/src/components/Layout.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from 'react';
 import { Link, NavLink, Outlet, useMatch } from 'react-router-dom';
 import { useAuth } from '../auth/useAuth';
 import { useLastCampaignId, useRememberCampaign } from '../lib/lastCampaign';
@@ -57,7 +58,10 @@ export function Layout() {
         )}
       </header>
       <main className="page">
-        <Outlet />
+        {/* The bars stay put while a page that has not been opened before downloads. */}
+        <Suspense fallback={null}>
+          <Outlet />
+        </Suspense>
       </main>
       {user && (
         <nav className="bottom-nav" aria-label="Main">

frontend/src/hooks/useCampaignSocket.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
+import { useQueryClient, type QueryKey } from '@tanstack/react-query';
 import { io, type Socket } from 'socket.io-client';
 import { API_URL } from '../api/client';
 import { useAuth } from '../auth/useAuth';
@@ -13,6 +13,10 @@ function getSocket(token: string): Socket {
   return sharedSocket;
 }
 
+// One change on the server often sends two or three events together. They are
+// gathered for this long and answered with one refetch per query.
+const FLUSH_MS = 50;
+
 // Joins the Socket.io room for a campaign and keeps React Query's cache in
 // sync with server-pushed events (HP/condition changes, encounter rounds,
 // new characters) so every open tab in the campaign updates live.
@@ -25,27 +29,44 @@ export function useCampaignSocket(campaignId: string | undefined) {
     const socket = getSocket(token);
     socket.emit('campaign:join', campaignId);
 
-    const onCharacterUpdated = () => {
-      qc.invalidateQueries({ queryKey: ['campaign', campaignId, 'characters'] });
-      qc.invalidateQueries({ queryKey: ['character'] });
-      qc.invalidateQueries({ queryKey: ['encounter'] }); // a character combatant shows the sheet HP
+    const pending = new Map<string, QueryKey>();
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const flush = () => {
+      timer = undefined;
+      const keys = [...pending.values()];
+      pending.clear();
+      // A wider key covers a narrower one waiting beside it: ['encounter'] takes in ['encounter', id].
+      const covered = (key: QueryKey) => keys.some((other) => other.length < key.length && other.every((part, i) => part === key[i]));
+      for (const queryKey of keys) if (!covered(queryKey)) qc.invalidateQueries({ queryKey });
+    };
+    const invalidate = (queryKey: QueryKey) => {
+      pending.set(JSON.stringify(queryKey), queryKey);
+      timer ??= setTimeout(flush, FLUSH_MS);
+    };
+    // An event names what changed when it is one thing, and nothing when it may be many.
+    const one = (root: string, id?: string) => invalidate(id ? [root, id] : [root]);
+
+    const onCharacterUpdated = ({ characterId }: { characterId?: string } = {}) => {
+      invalidate(['campaign', campaignId, 'characters']);
+      one('character', characterId);
+      invalidate(['encounter']); // a character combatant shows the sheet HP
       // A character arriving somewhere new adds it to the places their player can see.
-      qc.invalidateQueries({ queryKey: ['campaign', campaignId, 'locations'] });
+      invalidate(['campaign', campaignId, 'locations']);
     };
     const onCharacterCreated = () => {
-      qc.invalidateQueries({ queryKey: ['campaign', campaignId, 'characters'] });
+      invalidate(['campaign', campaignId, 'characters']);
     };
-    const onParticipantUpdated = () => {
-      qc.invalidateQueries({ queryKey: ['encounter'] });
+    const onParticipantUpdated = ({ encounterId }: { encounterId?: string } = {}) => {
+      one('encounter', encounterId);
       // A player's list only holds the encounters their characters are in.
-      qc.invalidateQueries({ queryKey: ['campaign', campaignId, 'encounters'] });
+      invalidate(['campaign', campaignId, 'encounters']);
     };
-    const onRoundAdvanced = () => {
-      qc.invalidateQueries({ queryKey: ['encounter'] });
+    const onRoundAdvanced = ({ encounterId }: { encounterId?: string } = {}) => {
+      one('encounter', encounterId);
     };
     const onCampaignDeleted = () => {
-      qc.invalidateQueries({ queryKey: ['campaigns'] });
-      qc.invalidateQueries({ queryKey: ['campaign', campaignId] });
+      invalidate(['campaigns']);
+      invalidate(['campaign', campaignId]);
     };
 
     socket.on('character:updated', onCharacterUpdated);
@@ -55,6 +76,10 @@ export function useCampaignSocket(campaignId: string | undefined) {
     socket.on('campaign:deleted', onCampaignDeleted);
 
     return () => {
+      if (timer) {
+        clearTimeout(timer);
+        flush();
+      }
       socket.emit('campaign:leave', campaignId);
       socket.off('character:updated', onCharacterUpdated);
       socket.off('character:created', onCharacterCreated);

frontend/src/pages/CampaignHomePage.tsx

@@ -570,7 +570,6 @@ export function CampaignHomePage() {
   const { data: npcs } = useCampaignNpcs(campaignId, data?.campaign.role === 'DM');
   const { data: notes } = useCampaignNotes(campaignId);
   const { data: locations } = useCampaignLocations(campaignId);
-  const { data: library } = useCampaignLibrary(campaignId, data?.campaign.role === 'DM');
 
   const createCharacter = useCreateCharacter(campaignId);
   const deleteCharacter = useDeleteCharacter(campaignId);
@@ -629,6 +628,9 @@ export function CampaignHomePage() {
   const [showItemLibrary, setShowItemLibrary] = useState(false);
   const [showSpellLibrary, setShowSpellLibrary] = useState(false);
   const [showMonsterLibrary, setShowMonsterLibrary] = useState(false);
+  // The library is a large download, so it waits until one of its pickers is opened.
+  const libraryOpen = showWeaponLibrary || showItemLibrary || showSpellLibrary || showMonsterLibrary;
+  const { data: library } = useCampaignLibrary(campaignId, data?.campaign.role === 'DM' && libraryOpen);
 
   const weaponsPage = usePagination(weapons, 8);
   const spellsPage = usePagination(spells, 8);

frontend/vite.config.ts

@@ -1,9 +1,20 @@
 import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import compression from 'compression'
+import { defineConfig, type Connect, type Plugin } from 'vite'
+
+// `vite preview` is what serves the built site, and nothing in front of it
+// compresses (frp only tunnels), so the files are gzipped here.
+const gzipPreview: Plugin = {
+  name: 'gzip-preview',
+  configurePreviewServer(server) {
+    // Typed for Express, and at home in any Node server.
+    server.middlewares.use(compression() as Connect.NextHandleFunction)
+  },
+}
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), gzipPreview],
 
   preview: {
     host: true,