Fix stutters for unsynchronized loading throbbers #3269
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I noticed that the loading throbber animation seemed to stutter a lot when it was started. After some testing I found that this only occurred for unsynchronized throbbers. See how the bottom 5 tabs in the GIF below compares to the synchronized tabs at the top of the GIF:
I remembered #1703 and investigated whether transparency was the problem again. Currently the background throbber is always transparent so I added some custom CSS to disable that transparency:
After that the animations no longer stuttered so that seems to fix the issue. I did some performance testing and unfortunately the change caused higher CPU usage. To minimize this disadvantage the PR makes the background throbber transparent as soon as there are no unsynchronized throbbers. Since the throbbers are only unsynchronized for a short time then maybe the higher CPU usage is worth it for the smoother animations?
Performance
To easier observe CPU usage of loading tabs I create infinitely loadings tabs using the same method I used in issue #1703.
ctrl+t
) and wait for them to finish loading.iperf.exe -s -p 8888
.localhost:8888
.I repeat all these steps for 3 different scenarios:
CPU usage when all throbbers are unsynchronized
To test this I disabled synchronization with the following css:
Shown
)CPU usage when all throbbers are synchronized
Invisible
)Environment