perf: serve images from a static host instead of the API

.env

@@ -1,3 +1,4 @@
 REACT_APP_API_URL=http://localhost:4200
+REACT_APP_STATIC_URL=
 PORT=8080
 VRT_VERSION=5.0.0

src/_config/env.config.ts

@@ -1,10 +1,14 @@
 export const API_URL = window._env_?.REACT_APP_API_URL;
+// Optional base URL for serving images directly from a static host (e.g. the
+// nginx of the UI container). When unset, images are fetched through the API.
+export const STATIC_URL = window._env_?.REACT_APP_STATIC_URL;
 export const VRT_VERSION = window._env_?.VRT_VERSION;
 
 declare global {
   interface Window {
     _env_: {
       REACT_APP_API_URL: string;
+      REACT_APP_STATIC_URL?: string;
       VRT_VERSION: string;
     };
   }

src/contexts/socket.context.tsx

@@ -95,34 +95,46 @@ function SocketProvider({ children }: SocketProviderProps) {
           return;
         }
 
-        addTestRun(
-          testRunDispatch,
-          testRuns.filter((tr) => tr.buildId === selectedBuild.id),
+        // events for other builds arrive too — an empty dispatch would still
+        // replace the (possibly huge) testRuns array and re-render the grid
+        const created = testRuns.filter(
+          (tr) => tr.buildId === selectedBuild.id,
         );
+        if (created.length === 0) {
+          return;
+        }
+
+        addTestRun(testRunDispatch, created);
       });
 
       state.socket.on("testRun_updated", function (testRuns: TestRun[]) {
         if (!selectedBuild) {
           return;
         }
 
-        updateTestRun(
-          testRunDispatch,
-          testRuns.filter((tr) => tr.buildId === selectedBuild.id),
+        const updated = testRuns.filter(
+          (tr) => tr.buildId === selectedBuild.id,
         );
+        if (updated.length === 0) {
+          return;
+        }
+
+        updateTestRun(testRunDispatch, updated);
       });
 
       state.socket.on("testRun_deleted", function (testRuns: TestRun[]) {
         if (!selectedBuild) {
           return;
         }
 
-        deleteTestRun(
-          testRunDispatch,
-          testRuns
-            .filter((tr) => tr.buildId === selectedBuild.id)
-            .map((testRun) => testRun.id),
-        );
+        const deleted = testRuns
+          .filter((tr) => tr.buildId === selectedBuild.id)
+          .map((testRun) => testRun.id);
+        if (deleted.length === 0) {
+          return;
+        }
+
+        deleteTestRun(testRunDispatch, deleted);
       });
     }
   }, [

src/contexts/testRun.context.tsx

@@ -117,40 +117,46 @@ function testRunReducer(state: State, action: IAction): State {
         loading: false,
       };
 
-    case "delete":
+    case "delete": {
+      const deletedIds = new Set(action.payload);
       return {
         ...state,
-        testRuns: state.testRuns.filter((p) => !action.payload.includes(p.id)),
+        testRuns: state.testRuns.filter((p) => !deletedIds.has(p.id)),
       };
+    }
 
-    case "add":
+    case "add": {
+      const existingIds = new Set(state.testRuns.map((tr) => tr.id));
+      // remove duplicates
+      const added = action.payload.filter((i) => !existingIds.has(i.id));
+      if (added.length === 0) {
+        return state;
+      }
       return {
         ...state,
-        testRuns: [
-          ...state.testRuns,
-          ...action.payload.filter(
-            // remove duplicates
-            (i) => !state.testRuns.find((tr) => tr.id === i.id),
-          ),
-        ],
+        testRuns: [...state.testRuns, ...added],
       };
+    }
 
-    case "update":
+    case "update": {
+      const updatedById = new Map(action.payload.map((i) => [i.id, i]));
+      const selectedUpdate = state.selectedTestRun
+        ? updatedById.get(state.selectedTestRun.id)
+        : undefined;
+      // keep the testRuns reference stable when nothing matched: replacing the
+      // array invalidates every memo over a possibly huge run list
+      if (
+        !selectedUpdate &&
+        !state.testRuns.some((t) => updatedById.has(t.id))
+      ) {
+        return state;
+      }
       return {
         ...state,
-        testRuns: state.testRuns.map((t) => {
-          const item = action.payload.find((i) => i.id === t.id);
-
-          if (item) {
-            return item;
-          }
-
-          return t;
-        }),
-        selectedTestRun:
-          action.payload.find((i) => i.id === state.selectedTestRun?.id) ??
-          state.selectedTestRun,
+        testRuns: state.testRuns.map((t) => updatedById.get(t.id) ?? t),
+        selectedTestRun: selectedUpdate ?? state.selectedTestRun,
       };
+    }
 
     case "touched":
       return {

src/services/static.service.ts

@@ -1,11 +1,15 @@
-import { API_URL } from "../_config/env.config";
+import { API_URL, STATIC_URL } from "../_config/env.config";
 import noImage from "../static/no-image.png";
 import JSZip from "jszip";
 import FileSaver from "file-saver";
 
 function getImage(name: string): string {
-  if (name) return `${API_URL}/images/${name}`;
-  return noImage;
+  if (!name) return noImage;
+  // Prefer the static host: the API serves images from the same single-threaded
+  // process that computes image diffs, so under ingestion load image requests
+  // queue behind CPU-bound work.
+  if (STATIC_URL) return `${STATIC_URL}/${name}`;
+  return `${API_URL}/images/${name}`;
 }
 
 async function downloadAsZip(