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?

[vilanell000]

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?

Thanks for the reply! I believe providing clear feedback to users is quite helpful — it makes it easier for them to know whether the save action was successful or not, without having to double-check manually.

That said, I understand if you prefer to keep it simpler. I’m totally fine with that. I also agree that passing the mutation query directly to the button sounds like a clean approach.

[rolandgeider]

I believe providing clear feedback to users is quite helpful

yeah, which is something we don't do as much as we should.

Do you want to give this idea a try?

[vilanell000]

I believe providing clear feedback to users is quite helpful

yeah, which is something we don't do as much as we should.

Do you want to give this idea a try?

yes, I would like to. but it will take some time, because I'm in middle of final week.

[rolandgeider]

yes, I would like to. but it will take some time, because I'm in middle of final week.

of course, this is not a job! 😄

[vilanell000]

yes, I would like to. but it will take some time, because I'm in middle of final week.

of course, this is not a job! 😄

hi, I created a new branch and another pull request #1161

here is how save button would act:

1. after click this button, replace the button while query is loading (using LoadingButton) and to make it disabled for one second at minimum and two seconds at maxmum.
2. then, the button will display“SAVE ✅”if success, or “SAVE❌ ” if failed briefly.
3. then switch back to original button.

hope this is what you expected.