Save button

[vilanell000]

Proposed Changes

• create a new save button component
• replace the save button in the routine form

Related Issue(s)

#1114

The new save button will briefly show save ❌ if it fails or save ✅ if it succeeds, then switch back to the normal "Save" button.

If you think it is a good idea, I can do in other page as well.

[rolandgeider]

hey! Adding some feedback is definitely a good idea. My first impression is that making the button red is a bit "too much". How about we simply disable the button while the query is running, show the ✅ afterwards and then remove that after a timeout. If there are any errors we can use the FormQueryErrors component that shows them and the user can try again after changing the input

[vilanell000]

hey! Adding some feedback is definitely a good idea. My first impression is that making the button red is a bit "too much". How about we simply disable the button while the query is running, show the ✅ afterwards and then remove that after a timeout. If there are any errors we can use the FormQueryErrors component that shows them and the user can try again after changing the input

Hi, thank you for your reply.
I modify a little as you suggest. (imported the FormQueryErrors into RoutineForm.tsx, you can check the changes)

• the color won't change now.
• disable the button during the mutation.
• the button stays disabled for 1.5s after click (cooldown), regardless of success/error.
• still shows “Saving…”, then “Saved ✅” briefly, then resets.
• keep the ❌ so that it corresponds with the ✅.

click save button if success:

click save button if faild:

after a timeout, it go back to save button:

[rolandgeider]

Hey! After thinking a bit about this, I suggest we trim this even further. How about using a LoadingButton like in the DayForm just below

There we just replace the regular button while the query is loading, but most will be fast enough that the user won't notice, so we should extend that by some timeout. We could also just pass the button a mutation query directly. What do you think?