stack/apps/dashboard
BilalG1 33a7ef5485
Fix item quantity dialog balance preview flicker on submit (#1774)
## Problem

On a customer's payments view, submitting a manual item quantity change
makes the "New balance: X → Y" preview in the dialog briefly flip to the
post-change values (e.g. `0 → 10` flashes to `10 → 20`) right before the
dialog closes.

## Root cause

The preview was computed from the live `currentQuantity` prop, which
comes from `useItem()` in the parent row. The SDK's
`createItemQuantityChange` awaits its item cache refresh before
resolving, so the prop updates to the new quantity while the dialog is
still open (and stays visible through the close animation), recomputing
the preview with stale input text.

## Fix

Snapshot the quantity when the dialog opens (in the existing
reset-on-open effect) and compute the preview from the snapshot instead
of the live prop. The preview now consistently shows the balance as of
when the dialog was opened.

## Before vs after

Recorded against built servers (before = `dev`, after = this branch).
The transactions refetch is artificially delayed by 5s in both
recordings to stretch the flicker window to a visible length — on
production latency it's a split-second flash.



https://github.com/user-attachments/assets/c005ef3b-45cb-4b75-bd71-5f723eae0c50



## Tradeoffs

If the quantity changes externally while the dialog is open, the preview
shows the value from open time. The mutation is a delta, so correctness
of the applied change is unaffected.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
  * Stabilized the quantity change preview while the dialog is open.
* The “New balance” display now consistently shows the quantity at
opening and the calculated updated quantity, even if underlying values
change during submission.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-17 09:09:15 -07:00
..
public Add 6/12/26 changelog entry (#1589) 2026-06-16 16:44:03 -07:00
scripts Enable dev tool Dashboard tab via development-environment probe instead of env var (#1749) 2026-07-09 20:23:07 -07:00
src Fix item quantity dialog balance preview flicker on submit (#1774) 2026-07-17 09:09:15 -07:00
.env Gate usage limit banners behind HEXCLAVE_DISABLE_PLAN_LIMITS (#1728) 2026-07-05 21:17:21 -07:00
.env.development Gate usage limit banners behind HEXCLAVE_DISABLE_PLAN_LIMITS (#1728) 2026-07-05 21:17:21 -07:00
.eslintrc.cjs Config sources (#1083) 2026-01-21 18:08:35 -08:00
.gitignore Support local dashboard in remote SSH and GH Codespaces (#1538) 2026-06-04 16:36:17 -07:00
.npmrc Split backend and dashboard (#83) 2024-06-18 15:49:31 +02:00
components.json Split backend and dashboard (#83) 2024-06-18 15:49:31 +02:00
DESIGN-GUIDE.md fix: remove email-outbox dashboard page (#1662) 2026-06-24 11:10:24 -07:00
instrumentation-client.ts feat(hexclave): PR 3 — native @hexclave/* source rename + delete dual-publish wiring (#1482) 2026-05-29 15:21:59 -07:00
LICENSE Split backend and dashboard (#83) 2024-06-18 15:49:31 +02:00
next.config.mjs Enable dev tool Dashboard tab via development-environment probe instead of env var (#1749) 2026-07-09 20:23:07 -07:00
package.json Enable dev tool Dashboard tab via development-environment probe instead of env var (#1749) 2026-07-09 20:23:07 -07:00
postcss.config.js Split backend and dashboard (#83) 2024-06-18 15:49:31 +02:00
tailwind.config.ts feat(hexclave): PR 3 — native @hexclave/* source rename + delete dual-publish wiring (#1482) 2026-05-29 15:21:59 -07:00
tsconfig.json Support local dashboard in remote SSH and GH Codespaces (#1538) 2026-06-04 16:36:17 -07:00
vitest.config.ts In-source unit tests (#429) 2025-02-14 11:47:52 -08:00