Skip to content

perf(web): reduce first-load jank with chunked rendering and infinite scroll#1070

Open
scoful wants to merge 4 commits intoanomalyco:devfrom
scoful:perf/web-infinite-scroll
Open

perf(web): reduce first-load jank with chunked rendering and infinite scroll#1070
scoful wants to merge 4 commits intoanomalyco:devfrom
scoful:perf/web-infinite-scroll

Conversation

@scoful
Copy link

@scoful scoful commented Mar 2, 2026

Problem

The models table currently renders a very large DOM on first load.
On lower-spec devices and some server environments, this causes visible UI stalls, high CPU usage, and poor first-interaction responsiveness.

In addition, table column logic was duplicated across multiple places (header rendering, sorting, search text building), which made changes
error-prone and harder to maintain.

What this PR changes

  • Switches the table to a lightweight shell + client-side data rendering.
  • Loads model data from /api.json with /_api.json fallback.
  • Introduces chunked rendering (CHUNK_SIZE = 100) to avoid blocking the main thread.
  • Adds infinite scroll using IntersectionObserver.
  • Adds a fallback path for environments without IntersectionObserver so all rows still render (no partial-data regression).
  • Unifies table column definitions into a single source of truth (columns.ts) and uses it for:
    • header rendering
    • cell render order
    • sorting accessors
    • URL sort mapping
    • dynamic colSpan
  • Replaces large index-based switch/case sort logic with typed accessor maps.
  • Adds row hover/focus highlight for better readability while scanning large tables.

Why this should be merged

  • Directly addresses the main UX pain point: first-load lag/freezing on large datasets.
  • Preserves existing user-facing functionality: search, sort, URL state sync, copy model ID, keyboard shortcut.
  • Reduces maintenance complexity and regression risk by removing duplicated column logic.

Validation

  • cd packages/web && bun run build passes.
  • Manual verification completed for:
    • progressive loading behavior
    • sort/search + URL updates
    • copy model ID interaction
    • non-IntersectionObserver fallback behavior

Scope

  • No provider/model schema changes.
  • No backend/function API behavior changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant