AutoSave UX
I am using the
autoSave
feature for useForm
and it saves fine and shows "saved ☑️ " in AutoSaveIndicator, but I am wondering if there's a way to change that back to "waiting for changes" or "unsaved" while the user is typing, because it technically is not saved once the user changes something.4 Replies
Hi @geoffatsource. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
autoSave
feature in refine's useForm
hook is designed to automatically save changes after a certain delay when a user edits a form. This feature is enabled by setting the autoSave.enabled
prop to true
[^1^][^5^]. The AutoSaveIndicator
component is used to communicate the auto-save status to the user [^2^][^3^][^4^].
However, based on the provided extracts, there is no direct way mentioned to change the AutoSaveIndicator
status back to "waiting for changes" or "unsaved" while the user is typing. The autoSave
feature and AutoSaveIndicator
component are designed to provide a visual feedback about the auto save status out of the box [^6^].
If you want to customize the behavior of the AutoSaveIndicator
or the autoSave
feature beyond the provided functionality, you may need to check the refine documentation or contact the refine support for more detailed guidance.
^1^]: [useForm autoSave (https://refine.dev/docs/api-reference/core/hooks/useForm/)
^2^]: [Antd AutoSaveIndicator (https://refine.dev/docs/api-reference/antd/components/antd-auto-save-indicator/)
^3^]: [Mui AutoSaveIndicator (https://refine.dev/docs/api-reference/mui/components/mui-auto-save-indicator/)
^4^]: [Chakra-ui AutoSaveIndicator (https://refine.dev/docs/api-reference/chakra-ui/components/chakra-ui-auto-save-indicator/)
^5^]: [useStepsForm autoSave (https://refine.dev/docs/api-reference/mantine/hooks/form/useStepsForm/)
^6^]: [React-admin vs refine - Auto Save (https://refine.dev/blog/react-admin-vs-refine/)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1014305963219615754> kapa.ai is still learning and improving, please let us know how it did by reacting below
absent-sapphire•11mo ago
Hello @geoffatsource, so if user starts editing the form, it will change it's state so
saving...
, is it not the case for you?correct-apricot•11mo ago
it will, yes. but, I have a 6-second debounce. During that time it will say
saved
☑️ but it hasn't captured the last changes. I am also using warnWhenUnsavedChanges
so it will say saved
and then tell me there are unsaved changes if I try to leave the page within that 6 seconds. Ideally as soon as there is an unsaved change, it would not say saved
and be hidden until it starts saving again. Not a huge problem but confusing for users.