CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-07-20 21:29:36 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fix item quantity dialog balance preview flickering to post-change values on submit

Browse Source 
The SDK's createItemQuantityChange awaits its item cache refresh before
resolving, so the live currentQuantity prop updates while the dialog is
still open (and during its close animation), briefly flipping the
"New balance: X -> Y" preview to the post-change values. Snapshot the
quantity when the dialog opens and compute the preview from that.
This commit is contained in:
Bilal Godil 2026-07-16 16:20:26 -07:00
parent 32daff06f5
commit 1c049e3bd1
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/dashboard/src/components/payments/item-quantity-change-dialog.tsx
View File

@ -44,6 +44,12 @@ export function ItemQuantityChangeDialog(props: Props) {
const [description, setDescription] = useState("");
const [error, setError] = useState<string | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
// Snapshot of the quantity at the moment the dialog was opened. The live
// prop updates as soon as the SDK refreshes the item cache after a
// successful submit — i.e. while the dialog is still open (and during its
// close animation) — which would make the "X → Y" preview flicker to the
// post-change values right before closing.
const [quantityAtOpen, setQuantityAtOpen] = useState(props.currentQuantity);
// Reset the form whenever the dialog is (re)opened so stale input doesn't
// leak across invocations.
@ -52,11 +58,15 @@ export function ItemQuantityChangeDialog(props: Props) {
setQuantityText("");
setDescription("");
setError(null);
setQuantityAtOpen(props.currentQuantity);
}
// We intentionally only re-snapshot on open, not when currentQuantity
// changes while the dialog is already showing.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.open]);
const parsedQuantity = parseQuantityChange(quantityText);
const newQuantity = parsedQuantity == null ? null : props.currentQuantity + parsedQuantity;
const newQuantity = parsedQuantity == null ? null : quantityAtOpen + parsedQuantity;
const submit = async () => {
if (parsedQuantity == null) {
@ -143,7 +153,7 @@ export function ItemQuantityChangeDialog(props: Props) {
<Typography type="label" className="text-muted-foreground text-xs">
{newQuantity == null
? "Positive values add to the balance, negative values subtract."
: `New balance: ${props.currentQuantity} → ${newQuantity}`}
: `New balance: ${quantityAtOpen} → ${newQuantity}`}
</Typography>
)}
</div>