airbyte
airbyte copied to clipboard
🪟 🐛 Fix loading state of "Launch" button in connection table
What
Fixes the loading state of the manual sync button on the connection table.
Closes https://github.com/airbytehq/airbyte/issues/20729
Before, there was no feedback for the user when clicking "Launch" on a manual sync, requiring the user to refresh the page to see that the sync started:
https://user-images.githubusercontent.com/7550957/215260933-7d0e6a53-e9d8-4a5a-9279-782ed1580569.mov
Now there is a loading state, the sync changes to "In progress" and its status is updated every 60 seconds (in this video it updates after 10 seconds to illustrate):
https://user-images.githubusercontent.com/7550957/215263313-47892172-b303-45a9-9448-a3f7a59413af.mov
There is also error handling if the manual sync request fails:
https://user-images.githubusercontent.com/7550957/215263328-68396b03-2514-43d5-989a-fa4d9e662b72.mov
How
- Refactors the code a bit to avoid prop drilling and repeated definition of the
onSync
callback - Adds a loading state from the mutation
- Refreshes/invalidates the connection list after the manual sync is triggered
- Adds a 60-second refresh interval to the connection table, so a user doesn't have to refresh the page to see the sync status update
- Changed the button text from "Launch" to "Start sync", which matches what we do on the connection page (we don't use "Launch" anywhere else in the app).
Recommended reading order
-
StatusCellControl.tsx
anduseConnectionHook.tsx
have the main changes to logic - The rest