Use animated icon as status indicator

[fcollonval]

Fixes #803

[github-actions]

👈 Launch a binder notebook on branch fcollonval/jupyterlab-git/fcollonval/issue803

[fcollonval]

@mlucool @ianhi Happy to get your feedback on this one.

[mlucool]

Thanks for the tag @fcollonval.

I really like the icon for refresh. While this is much better than the previous version, I still find the movement distracting. Can we invert this to only call attention to it when something is wrong or it's doing work triggered by a user? For example, automatically refreshing status is not work but committing a notebook is.

[krassowski]

It might be still a bit distracting as discussed above, but aside from that I see a quirk with the icon jumping to the right when switching the panels (I assume it was not intended):

Edit: updated the GIF, but it does not catch the movement sometimes (sometimes it is too quick for the frame rate)

[krassowski]

It seems that the issue that I am seeing is not with jupyterlab-git but with the core logs icon which is hidden (.jp-LogConsoleStatusItem) and has its classList populated with some delay after switching panels:

[krassowski]

I opened an issue upstream.

[fcollonval]

I still find the movement distracting.

I switch to fill opacity animation to be less catchy.

Can we invert this to only call attention to it when something is wrong or it's doing work triggered by a user? For example, automatically refreshing status is not work but committing a notebook is.

The idea was to get the status bar reflecting the git actions and the pop-up to inform of the user actions progression. One of the point was to be able to see if for example refreshing was not finishing - this is by essence hard to automate as an arbitrary timeout changing the icon will be unable to take into account poor network for instance.

So I would rather keep the current logic but make it more discrete.

[fcollonval]

@meeseeksdev backport to jlab-2

[lumberbot-app]

Owee, I'm MrMeeseeks, Look at me.

There seem to be a conflict, please backport manually. Here are approximate instructions:

1. Checkout backport branch and update it.

$ git checkout jlab-2
$ git pull

2. Cherry pick the first parent branch of the this PR on top of the older branch:

$ git cherry-pick -m1 fa7eaa5eb3bd29331d81ad4211c2c9e432dd6bd4

3. You will likely have some merge/cherry-pick conflict here, fix them and commit:

$ git commit -am 'Backport PR #893: Use animated icon as status indicator'

4. Push to a named branch :

git push YOURFORK jlab-2:auto-backport-of-pr-893-on-jlab-2

5. Create a PR against branch jlab-2, I would have named this PR:

"Backport PR #893 on branch jlab-2"

And apply the correct labels and milestones.

Congratulation you did some good work ! Hopefully your backport PR will be tested by the continuous integration and merged soon!

If these instruction are inaccurate, feel free to suggest an improvement.