feat(appointments): Disable the booking button while loading

[pjrobertson]

The server can take a bit of time to response after clicking the 'Book the appointment button' (see below video - might be my server/email server is slow, hence why it taskes 8+ seconds!). To improve UX and to avoid the user clicking the button multiple times, we should disable the button while loading and/or add a loading icon.

loading.mov.sm.mp4

Ideally, the code would also either replace the 'Book the appointment' text with a loading spinner, or grey out the entire popup window and add a loading icon, but that's beyond my ability 😿

[codecov]

Codecov Report

Patch coverage has no change and project coverage change: -0.09 ⚠️

Comparison is base (da70650) 22.43% compared to head (1303dda) 22.35%.

❗ Current head 1303dda differs from pull request most recent head 3519b5b. Consider uploading reports for the commit 3519b5b to get more accurate results

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #5244      +/-   ##
============================================
- Coverage     22.43%   22.35%   -0.09%     
  Complexity      373      373              
============================================
  Files           238      238              
  Lines         11589    11635      +46     
  Branches       2176     2261      +85     
============================================
+ Hits           2600     2601       +1     
- Misses         8989     9034      +45     

Flag	Coverage Δ
javascript	13.85% <0.00%> (-0.07%)	⬇️
php	63.96% <ø> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/components/Appointments/AppointmentDetails.vue	0.00% <0.00%> (ø)

... and 43 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[ChristophWurst]

Let's also disable the inputs and textarea above while loading

[pjrobertson]

Let's also disable the inputs and textarea above while loading

Done :)

I also disabled closing of the modal whilst the submit form is loading.

Finally, I would really like to display a loading spinner in the button - I've added an attempt at that here, but I would appreciate feedback.

[pjrobertson]

Here's what the spinner looks like:

Screen.Recording.2023-05-27.at.08.38.41.mov

[pjrobertson]

@tcitworld @ChristophWurst anything further I can do on this PR to get it merged? Thanks!

[ChristophWurst]

Code looks good

[pjrobertson]

@ChristophWurst - sorry to keep bugging you on this. Who should I request to review the PR (that's blocking the merge)?

Thanks!

[pjrobertson]

🎉 Thanks Christoph! I hope to try and work on a few more bugs soon as well :-)

[ChristophWurst]

Awesome!