perf: avoid style recalc for spinner in Chrome (#2071)
This commit is contained in:
parent
16e66346d7
commit
374b8b251e
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue