perf: avoid style recalc for spinner in Chrome (#2071)

This commit is contained in:
Nolan Lawson 2021-07-05 10:23:48 -07:00 committed by GitHub
parent 16e66346d7
commit 374b8b251e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 3 deletions

View file

@ -1,4 +1,4 @@
<SvgIcon className="loading-spinner-icon spin {maskStyle ? 'mask-style' : ''}"
<SvgIcon className="loading-spinner-icon {animate ? 'spin' : ''} {maskStyle ? 'mask-style' : ''}"
style="width: {size}px; height: {size}px;"
href="#fa-spinner"
ariaLabel="{intl.loading}"
@ -18,7 +18,8 @@
export default {
data: () => ({
maskStyle: false,
size: 64
size: 64,
animate: true
}),
components: {
SvgIcon

View file

@ -3,7 +3,10 @@
aria-hidden={!showLoading}
role="alert"
>
<LoadingSpinner size={48} />
<!-- Sapper's mousemove event listener schedules style recalculations for the loading spinner in
Chrome because it's always animating, even when hidden. So disable animations when not visible
to avoid this. -->
<LoadingSpinner size={48} animate={showLoading} />
<span class="loading-footer-info">
{intl.loadingMore}
</span>