boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

fix(mui): freeze loading state + button label during dialog close (Modal + ConfirmDialog)

Browse Source 
On save/delete success the parent flips loading false a beat before the dialog finishes its fade-out, so the button flashed back to 'Uložit změny'/'Smazat'. Both dialogs now freeze the loading flag (and the label props) while open, so the closing dialog keeps showing 'Ukládám…'/'Pracuji…'. Same derive-state-from-props pattern as the title freeze.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-06 22:11:58 +02:00
parent 305c3fd97b
commit 2efd1c6df4
2 changed files with 31 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/admin/ui/Modal.tsx
View File

@@ -39,20 +39,25 @@ export default function Modal({
// Freeze the shown title/subtitle/submitText while closing, so the fade-out
// never flashes the "create" variant when the caller clears `editingUser` on
// close (React derive-state-from-props: update only while open).
const [shown, setShown] = useState({ title, subtitle, submitText });
// Freeze label-affecting props (incl. `loading`) while open, so neither the
// title/submitText NOR the loading state flips during the close fade-out
// (e.g. on save, `loading` goes false a beat before the dialog finishes
// closing — without this the button would flash back to "Uložit změny").
const [shown, setShown] = useState({ title, subtitle, submitText, loading });
if (
isOpen &&
(shown.title !== title ||
shown.subtitle !== subtitle ||
shown.submitText !== submitText)
shown.submitText !== submitText ||
shown.loading !== loading)
) {
setShown({ title, subtitle, submitText });
setShown({ title, subtitle, submitText, loading });
}
return (
<Dialog
open={isOpen}
onClose={loading ? undefined : onClose}
onClose={shown.loading ? undefined : onClose}
fullWidth
maxWidth={maxWidth}
disableScrollLock
@@ -68,15 +73,15 @@ export default function Modal({
</DialogTitle>
<DialogContent>{children}</DialogContent>
<DialogActions sx={{ px: 3, pb: 2 }}>
<MuiButton onClick={onClose} color="inherit" disabled={loading}>
<MuiButton onClick={onClose} color="inherit" disabled={shown.loading}>
{cancelText}
</MuiButton>
<MuiButton
onClick={onSubmit}
variant="contained"
disabled={loading || submitDisabled}
disabled={shown.loading || submitDisabled}
>
{loading ? "Ukládám…" : shown.submitText}
{shown.loading ? "Ukládám…" : shown.submitText}
</MuiButton>
</DialogActions>
</Dialog>