data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/routes/_components/LoadingSpinner.html
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;" style="width: {size}px; height: {size}px;"
href="#fa-spinner" href="#fa-spinner"
ariaLabel="{intl.loading}" ariaLabel="{intl.loading}"
@ -18,7 +18,8 @@
export default { export default {
data: () => ({ data: () => ({
maskStyle: false, maskStyle: false,
size: 64 size: 64,
animate: true
}), }),
components: { components: {
SvgIcon SvgIcon

5
src/routes/_components/timeline/LoadingFooter.html
View file

@ -3,7 +3,10 @@
aria-hidden={!showLoading} aria-hidden={!showLoading}
role="alert" 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"> <span class="loading-footer-info">
{intl.loadingMore} {intl.loadingMore}
</span> </span>