From 374b8b251e18ae1e7a4588e05f4ccef3622c4538 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 5 Jul 2021 10:23:48 -0700
Subject: [PATCH] perf: avoid style recalc for spinner in Chrome (#2071)

---
 src/routes/_components/LoadingSpinner.html         | 5 +++--
 src/routes/_components/timeline/LoadingFooter.html | 5 ++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/routes/_components/LoadingSpinner.html b/src/routes/_components/LoadingSpinner.html
index f9202038..903cd6f0 100644
--- a/src/routes/_components/LoadingSpinner.html
+++ b/src/routes/_components/LoadingSpinner.html
@@ -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
diff --git a/src/routes/_components/timeline/LoadingFooter.html b/src/routes/_components/timeline/LoadingFooter.html
index 361cefed..973c9d88 100644
--- a/src/routes/_components/timeline/LoadingFooter.html
+++ b/src/routes/_components/timeline/LoadingFooter.html
@@ -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>