Is your enhancement related to a problem? Please describe.

Although a big improvement was done in the JS part of the sync process while creating the new Sync Page for EP 4.0, that code still has room to be improved. Having functions to deal with components' behavior, improve readability, etc. will help us to maintain that code and improve the developer experience in general.

There are also some additional changes we need to make in the Sync Page that I'll leave listed below, so this issue serves as an umbrella for all the changes. Different Pull Requests are expected, so we don't have to deal with a big code change all at once.

Describe the solution you'd like

Honestly, a major rewrite. The code looks too long, and several repeated pieces (that represent behavior that really should be coupled) are some examples of things I think we can get rid of.

To Do List

As PRs are opened, let's add their number to the related list item here.

• Code refactor
• BUG: Hide last sync element info box if there's no info to display #2695
• Sync Icon: fix in retina screens
• Sync Icon: should spin while the process is running
• Sync Icon: when the sync is done, should be changed (a checkmark perhaps) or be hidden
• Sync Text: the text takes a while to be changed after the user clicked on the sync button, although requests are already being sent and received.