Add virtual scrolling to StreamsTable for large stream lists.

frontend/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@stellar/freighter-api": "^2.0.0",
     "@stellar/stellar-sdk": "^14.5.0",
+    "@tanstack/react-virtual": "^3.13.26",
     "lucide-react": "^0.294.0",
     "react": "^18.2.0",
     "react-dom": "^18.3.1",

frontend/src/components/StreamsTable.test.tsx

@@ -1,14 +1,14 @@
 import { render, screen, fireEvent, cleanup } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
-import { StreamsTable } from "./StreamsTable";
+import { StreamsTable, STREAMS_TABLE_VIRTUAL_OVERSCAN } from "./StreamsTable";
 import { Stream } from "../types/stream";
 
 const noop = vi.fn().mockResolvedValue(undefined);
 
-const mockStreams: Stream[] = [
-  {
-    id: "1",
+function createMockStream(id: string, status: Stream["progress"]["status"] = "active"): Stream {
+  return {
+    id,
     sender: "G_SENDER123456789012345678901234567890123456789012345678901",
     recipient: "G_RECIPIENT123456789012345678901234567890123456789012345",
     assetCode: "USDC",
@@ -17,15 +17,17 @@ const mockStreams: Stream[] = [
     startAt: 1670000000,
     createdAt: 1670000000,
     progress: {
-      status: "active",
+      status,
       ratePerSecond: 0.01,
       elapsedSeconds: 100,
       vestedAmount: 20,
       remainingAmount: 80,
       percentComplete: 20,
     },
-  },
-];
+  };
+}
+
+const mockStreams: Stream[] = [createMockStream("1")];
 
 const defaultProps = {
   streams: mockStreams,
@@ -37,6 +39,21 @@ const defaultProps = {
   onEditStartTime: vi.fn(),
 };
 
+function setScrollViewport(element: HTMLElement, height: number) {
+  Object.defineProperty(element, "clientHeight", {
+    configurable: true,
+    value: height,
+  });
+  Object.defineProperty(element, "offsetHeight", {
+    configurable: true,
+    value: height,
+  });
+  Object.defineProperty(element, "scrollHeight", {
+    configurable: true,
+    value: height * 20,
+  });
+}
+
 describe("StreamsTable column visibility", () => {
   beforeEach(() => {
     localStorage.clear();
@@ -74,3 +91,53 @@ describe("StreamsTable column visibility", () => {
     expect(screen.getByRole("columnheader", { name: "Asset" })).toBeInTheDocument();
   });
 });
+
+describe("StreamsTable virtual scrolling", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("uses a bounded scroll container for the table body", () => {
+    render(<StreamsTable {...defaultProps} />);
+
+    const scrollContainer = screen.getByTestId("streams-table-scroll");
+    expect(scrollContainer).toHaveClass("streams-table-scroll");
+    expect(scrollContainer.getAttribute("style")).toContain("max-height");
+  });
+
+  it("renders only visible rows plus overscan for large lists", () => {
+    const manyStreams = Array.from({ length: 500 }, (_, i) =>
+      createMockStream(String(i + 1).padStart(4, "0")),
+    );
+
+    const view = render(<StreamsTable {...defaultProps} streams={manyStreams} />);
+    setScrollViewport(screen.getByTestId("streams-table-scroll"), 400);
+    view.rerender(<StreamsTable {...defaultProps} streams={manyStreams} />);
+
+    const renderedRows = screen.getAllByRole("checkbox", {
+      name: /^Select stream /,
+    });
+    const expectedMax =
+      Math.ceil(400 / 52) + STREAMS_TABLE_VIRTUAL_OVERSCAN + 2;
+
+    expect(renderedRows.length).toBeLessThan(500);
+    expect(renderedRows.length).toBeLessThanOrEqual(expectedMax);
+  });
+
+  it("configures virtual overscan to five rows", () => {
+    expect(STREAMS_TABLE_VIRTUAL_OVERSCAN).toBe(5);
+  });
+
+  it("preserves keyboard focus order for rendered row actions", () => {
+    render(<StreamsTable {...defaultProps} />);
+
+    const cancelButton = screen.getByRole("button", { name: "Cancel stream 1" });
+    cancelButton.focus();
+    expect(document.activeElement).toBe(cancelButton);
+  });
+});