feat(sidebar): client-side pagination on guard_events + projects (E2)#52
Merged
Conversation
The events table fetched 50 rows and rendered them all; the projects table rendered every workspace project regardless of count. Workspaces with hundreds of guarded projects (or after a busy week of cutoffs) took a measurable chunk out of first paint and produced a long scrollable wall of rows. Cache the full server response, render the first 20 rows, and reveal 20 more per "Load more" click. The button is hidden when no rows remain. Re-rendering after a manual reconcile or post-refresh loadAll resets the slice to page 1 — fresh data means a fresh start. Bumped /api/guard/events?limit from 50 to 100 so the new pagination has enough material to be useful (server enforces 1..200 via A6). The projects endpoint is unchanged — it returns the full list, which the client now slices. Buttons use `hidden` attribute and a `.load-more` class with light/dark variants. No inline styles per the existing CSP discipline.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
E2 from the work list. Projects and events tables rendered every row up-front — fine for a tiny workspace, but a workspace with hundreds of guarded projects or a busy week of cutoffs took a real hit on first paint and ended up as a long scroll wall. The server already supports a bounded `?limit=` (A6 — 1..200), but the client always asked for 50 events and rendered all of them at once.
Change
Client-side pagination, 20 rows per page.
Re-render behaviour
A manual reconcile (`renderProjects(payload.projects)`) or a post-refresh `loadAll` resets the slice to page 1. That's the right UX — fresh data → user expects to see the top.
FE-06 generation-tagging in `loadAll` is untouched; the new state lives in render-callees that only run when the gen check passes.
Test plan
🤖 Generated with Claude Code