airbyte icon indicating copy to clipboard operation
airbyte copied to clipboard

🪟 🐛 Fix loading state of "Launch" button in connection table

Open josephkmh opened this issue 2 years ago • 0 comments

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

  1. StatusCellControl.tsx and useConnectionHook.tsx have the main changes to logic
  2. The rest

josephkmh avatar Jan 27 '23 20:01 josephkmh