Lazy load plan customer counts

[og2701]

---

Summary by cubic

Lazy-loads customer counts in the product list. The “Customers” column now shows a Skeleton while counts fetch to reduce table flicker and improve perceived performance.

• New Features
  • Added isCountsLoading to createProductListColumns; renders Skeleton with aria-label "Loading" in the “Customers” cell while loading, otherwise shows ProductCountsTooltip.
  • Passed isCountsLoading from ProductListTable into column creation and removed table-level isLoading flags for product sections.
  • Added tests (product-list-lazy-counts.test.tsx) to verify skeleton vs tooltip rendering.

^{Written for commit 0182da3. Summary will update on new commits.}

Greptile Summary

This PR replaces the coarse-grained table-level loading skeleton (previously applied to all three product table sections via isLoading: isCountsLoading) with a per-cell skeleton rendered only in the "Customers" column while counts are fetching. Product names, IDs, groups, and created dates are now visible immediately; the customer count cell shows a Skeleton until counts resolve.

• [Improvements] createProductListColumns now accepts isCountsLoading and renders a <Skeleton> in the Customers cell during the fetch, keeping the rest of the table interactive immediately.
• [Improvements] Removed isLoading from all three Table.Provider configs, eliminating the full-table skeleton overlay that previously blocked all product data while counts loaded.
• [Improvements] New unit tests cover both states (skeleton while loading, tooltip after load).

Confidence Score: 4/5

Safe to merge — the change is well-scoped, improves perceived load time, and is covered by new unit tests.

The change is straightforward: loading state moves from the table level to a single column cell. Product data renders immediately; only the Customers count cell shows a skeleton. The new tests walk raw React element props which makes them brittle to future JSX restructuring, but this does not affect runtime behavior.

The test file (product-list-lazy-counts.test.tsx) would benefit from a more resilient assertion strategy, but no files have functional issues requiring attention before merge.

Important Files Changed

Filename	Overview
vite/src/views/products/products/components/product-list/ProductListColumns.tsx	Adds isCountsLoading prop to createProductListColumns; swaps the Customers cell from always rendering ProductCountsTooltip to conditionally rendering a Skeleton while loading.
vite/src/views/products/products/components/product-list/ProductListTable.tsx	Passes isCountsLoading into createProductListColumns (and adds it to the dependency array), removing the table-level isLoading prop that previously blanketed all three table sections with skeleton rows.
vite/tests/views/products/products/product-list-lazy-counts.test.tsx	New unit tests covering the skeleton/tooltip toggle in the Customers cell; tests access cell.props.children.type directly which couples them to the exact JSX wrapper structure.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant App as ProductListTable
    participant Q as useProductsQuery
    participant Cols as createProductListColumns
    participant Cell as Customers Cell

    App->>Q: fetch products + counts
    Q-->>App: "products (immediate), isCountsLoading=true"
    App->>Cols: "createProductListColumns({ isCountsLoading: true, ... })"
    Cols-->>Cell: render Skeleton aria-label Loading customer count

    Q-->>App: "counts resolved, isCountsLoading=false"
    App->>Cols: "createProductListColumns({ isCountsLoading: false, ... })"
    Cols-->>Cell: render ProductCountsTooltip product

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant App as ProductListTable
    participant Q as useProductsQuery
    participant Cols as createProductListColumns
    participant Cell as Customers Cell

    App->>Q: fetch products + counts
    Q-->>App: "products (immediate), isCountsLoading=true"
    App->>Cols: "createProductListColumns({ isCountsLoading: true, ... })"
    Cols-->>Cell: render Skeleton aria-label Loading customer count

    Q-->>App: "counts resolved, isCountsLoading=false"
    App->>Cols: "createProductListColumns({ isCountsLoading: false, ... })"
    Cols-->>Cell: render ProductCountsTooltip product

Loading

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
vite/tests/views/products/products/product-list-lazy-counts.test.tsx:32-38
**Brittle JSX-structure assertion**

Both tests access `cell.props.children.type` to reach inside the wrapping `<div>`. If the outer `<div className="text-muted-foreground">` is ever removed or an additional wrapper is added, the assertions will silently start asserting on the wrong element rather than failing with a clear message. A more resilient approach would be to use React Testing Library to render the element and query by `aria-label` (`"Loading customer count"`) for the skeleton case and by role/text for the tooltip case, rather than walking raw React element props.

_{Reviews (1): Last reviewed commit: "Lazy load plan customer counts" | Re-trigger Greptile}

Greptile also left 1 inline comment on this PR.

[capy-ai]

Capy auto-review is paused for this organization because the usage-cycle auto-review limit has been reached. Increase the limit or turn it off in billing settings to resume automatic reviews.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
checkout	Ignored		Jul 20, 2026 8:15pm
landing-page	Ignored		Jul 20, 2026 8:15pm