From ac140fcf8bd1cc839ed628bf9d0f989c4c8e27e2 Mon Sep 17 00:00:00 2001 From: Cristian Magherusan-Stanciu Date: Mon, 1 Jun 2026 15:22:12 +0200 Subject: [PATCH] fix(frontend/inventory+history): align skeleton column counts with #792 tables (closes #896) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PR #792 added the "Monthly Cost" column to two history tables and to the active-commitments table, but the skeleton-loader call sites + their explanatory comments still referenced the pre-#792 column counts. The shimmer placeholders therefore render with one fewer cell than the real table on first paint, and the comments are out of sync with the rendered lists. - history.ts:217 — purchase-history skeleton: showSkeletonRows 3rd arg 11 -> 12; comment lists the 12 rendered columns (adds "Monthly Cost"). - history.ts:224 — pending-approval queue skeleton: showSkeletonRows 3rd arg 8 -> 12; comment lists the 12 rendered columns (Date / Account / Provider / Service / Count / Term / Payment / Monthly Cost / Upfront Cost / Monthly Savings / Created by / Actions). - inventory.ts:86 — active-commitments skeleton comment: "10 cols" -> "11 cols" to match ACTIVE_COMMITMENTS_COLS (the call site already uses the constant, so this is comment-only). Verified against the rendered lists in renderHistoryList (history.ts:650-663), the pending-approval queue (history.ts:946-959), and renderActiveCommitmentsTable's headers array (inventory.ts:156). Test suite (10 suites / 202 tests) and tsc --noEmit both pass. --- frontend/src/history.ts | 19 ++++++++++--------- frontend/src/inventory.ts | 2 +- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/frontend/src/history.ts b/frontend/src/history.ts index bc2d09d13..70456108f 100644 --- a/frontend/src/history.ts +++ b/frontend/src/history.ts @@ -210,18 +210,19 @@ export async function loadHistory(): Promise { // Issue #344 T3: skeleton rows for the purchase-history table. 8 // rows matches the typical first-page row count so the skeleton // doesn't shrink dramatically when real data arrives. Column count - // (11) mirrors the rendered table headers in renderHistoryList: + // (12) mirrors the rendered table headers in renderHistoryList: // Status / Date / Provider / Service / Type / Region / Count / - // Term / Upfront Cost / Monthly Savings / Plan. + // Term / Upfront Cost / Monthly Cost / Monthly Savings / Plan. const listEl = document.getElementById('history-list'); - if (listEl) showSkeletonRows(listEl, 8, 11); - // Pending-approval queue card (issue #340 sub-task): 3 rows x 8 - // cols matches the queue table shape (Date / Provider / Service / - // Count / Upfront / Monthly Savings / Created by / Actions). The - // queue is typically much shorter than the full history list, so - // 3 rows is a sensible skeleton size. + if (listEl) showSkeletonRows(listEl, 8, 12); + // Pending-approval queue card (issue #340 sub-task): 3 rows x 12 + // cols matches the queue table shape (Date / Account / Provider / + // Service / Count / Term / Payment / Monthly Cost / Upfront Cost / + // Monthly Savings / Created by / Actions). The queue is typically + // much shorter than the full history list, so 3 rows is a sensible + // skeleton size. const queueEl = document.getElementById('purchases-approval-queue'); - if (queueEl) showSkeletonRows(queueEl, 3, 8); + if (queueEl) showSkeletonRows(queueEl, 3, 12); try { // Provider/account filters live in state.ts now (mutated by topbar chips). diff --git a/frontend/src/inventory.ts b/frontend/src/inventory.ts index 960be35c6..10f543a5a 100644 --- a/frontend/src/inventory.ts +++ b/frontend/src/inventory.ts @@ -110,7 +110,7 @@ export async function loadActiveCommitments(): Promise { // account chip is single-select; forward only when exactly one is active. const accountID = accountIDs.length === 1 ? accountIDs[0] : undefined; - // 5 rows × 10 cols matches the rendered table shape (see + // 5 rows × 11 cols matches the rendered table shape (see // renderActiveCommitmentsTable). The renderer wipes the container's // children for a clean handoff from the skeleton. showSkeletonRows(container, 5, ACTIVE_COMMITMENTS_COLS);