Lazy load plan customer counts

Author: og2701

vite/src/views/products/products/components/product-list/ProductListColumns.tsx

@@ -1,5 +1,5 @@
 import type { ProductV2 } from "@autumn/shared";
-import { MiniCopyButton } from "@autumn/ui";
+import { MiniCopyButton, Skeleton } from "@autumn/ui";
 import type { Row } from "@tanstack/react-table";
 import type { SandboxSummary } from "@/hooks/queries/useSandboxesQuery";
 import { formatUnixToDateTime } from "@/utils/formatUtils/formatDateUtils";
@@ -9,10 +9,12 @@ import { ProductNameCell } from "./ProductNameCell";
 
 export const createProductListColumns = ({
 	showGroup = false,
+	isCountsLoading = false,
 	onDeleteClick,
 	sandboxes = [],
 }: {
 	showGroup?: boolean;
+	isCountsLoading?: boolean;
 	onDeleteClick?: (product: ProductV2) => void;
 	sandboxes?: SandboxSummary[];
 } = {}) => [
@@ -63,7 +65,14 @@ export const createProductListColumns = ({
 		cell: ({ row }: { row: Row<ProductV2 & { active_count?: number }> }) => {
 			return (
 				<div className="text-muted-foreground">
-					<ProductCountsTooltip product={row.original} />
+					{isCountsLoading ? (
+						<Skeleton
+							aria-label="Loading customer count"
+							className="h-4 w-14"
+						/>
+					) : (
+						<ProductCountsTooltip product={row.original} />
+					)}
 				</div>
 			);
 		},

vite/src/views/products/products/components/product-list/ProductListTable.tsx

@@ -139,10 +139,11 @@ export function ProductListTable() {
 		() =>
 			createProductListColumns({
 				showGroup: hasAnyGroup,
+				isCountsLoading,
 				onDeleteClick: handleDeleteClick,
 				sandboxes,
 			}),
-		[hasAnyGroup, handleDeleteClick, sandboxes],
+		[hasAnyGroup, isCountsLoading, handleDeleteClick, sandboxes],
 	);
 
 	const recurringBaseTable = useProductTable({
@@ -213,7 +214,6 @@ export function ProductListTable() {
 								table: recurringBaseTable,
 								numberOfColumns: columns.length,
 								enableSorting,
-								isLoading: isCountsLoading,
 								getRowHref,
 								getRowClassName: (product: ProductWithCounts) =>
 									product.base_id
@@ -241,7 +241,6 @@ export function ProductListTable() {
 									table: recurringAddOnTable,
 									numberOfColumns: columns.length,
 									enableSorting,
-									isLoading: isCountsLoading,
 									getRowHref,
 									rowClassName: "h-10",
 								}}
@@ -261,7 +260,6 @@ export function ProductListTable() {
 								table: oneTimeTable,
 								numberOfColumns: columns.length,
 								enableSorting,
-								isLoading: isCountsLoading,
 								getRowHref,
 								emptyStateText:
 									"One-time prices for top-ups or lifetime purchases",

vite/tests/views/products/products/product-list-lazy-counts.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, test } from "bun:test";
+import type { ProductV2 } from "@autumn/shared";
+import { Skeleton } from "@autumn/ui";
+import type { ReactElement } from "react";
+import { createProductListColumns } from "@/views/products/products/components/product-list/ProductListColumns";
+import { ProductCountsTooltip } from "@/views/products/products/product-row-toolbar/ProductCountsTooltip";
+
+const product = { id: "pro" } as ProductV2;
+
+const renderCustomerCell = ({
+	isCountsLoading,
+}: {
+	isCountsLoading: boolean;
+}) => {
+	const customerColumn = createProductListColumns({ isCountsLoading }).find(
+		(column) => column.header === "Customers",
+	);
+
+	if (typeof customerColumn?.cell !== "function") {
+		throw new Error("Customers column cell is not renderable");
+	}
+
+	return customerColumn.cell({
+		row: { original: product },
+	} as never) as ReactElement<{ children: ReactElement }>;
+};
+
+describe("product list customer count loading", () => {
+	test("shows a skeleton in the Customers cell while counts load", () => {
+		const cell = renderCustomerCell({ isCountsLoading: true });
+
+		expect(cell.props.children.type).toBe(Skeleton);
+	});
+
+	test("shows the customer count tooltip after counts load", () => {
+		const cell = renderCustomerCell({ isCountsLoading: false });
+
+		expect(cell.props.children.type).toBe(ProductCountsTooltip);
+	});
+});