[CAL-1625] Update CalendarSwitch.tsx to use react-query state

[sean-brydon]

Follow up of #8677

@sean-brydon My reasoning for it is the same as there for the Save button(except that it has a possibly larger payload and can take more time). When you click on the Save button, there is a loader that runs because it is updating something. We wouldn't want save to be considered done when we know it can fail. There are 2 ways we are using toggles in the app.

• Here toggling it doesn't actually update anything unless you click the Save button later.

• Current case that we are discussing, where toggling it actually updates something. [This case is similar to the Save button] You mentioned that it's not using tRPC, but it's using react-query already so we can do an optimistic update to further improve the experience. That would then match the local state implementation in terms of responsiveness.

Originally posted by @hariombalhara in https://github.com/calcom/cal.com/issues/8677#issuecomment-1537077269

_CAL-1625

[SohamRatnaparkhi]

Hello @sean-brydon , I would love to work on this issue. Can you assign it to me.

[vaibhav135]

@sean-brydon I will raise the MR for this. I think it's quite similar to what I have implemented here in #8595

[sean-brydon]

@sean-brydon I will raise the MR for this. I think it's quite similar to what I have implemented here in #8595

I think youre right! Thanks again @vaibhav135 :)

[sean-brydon]

@vaibhav135 if you work on this before #8677 is merged would you please base your branch off that PR so we dont have to deal with merge changes?

[vaibhav135]

@sean-brydon yes sure I'll do that.

[vaibhav135]

@sean-brydon if we are doing optimistic UI updates. Then should we have a middle state for the switch?

enable

intermediate (loading)

disable

or do I just remove the useState simply and just rely on the switch loader, like how you have mentioned here.