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.