perf: avoid style recalc for spinner in Chrome

loading-spinner-fix
Nolan Lawson 2021-07-05 09:55:08 -07:00
rodzic 16e66346d7
commit d7f027ac08
2 zmienionych plików z 7 dodań i 3 usunięć

Wyświetl plik

@ -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

Wyświetl plik

@ -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>