fix(loader): respect prefers-reduced-motion

src/sentry/templates/sentry/partial/loader.html

@@ -37,6 +37,12 @@
                     stroke-dashoffset: -1150;
                 }
             }
+            @media (prefers-reduced-motion: reduce) {
+              path {
+                animation: none;
+                stroke-dashoffset: 0;
+              }
+            }
         </style>
         <script>
             const host = document.currentScript.closest('svg');
@@ -115,7 +121,9 @@
           })
         }
         connectedCallback() {
-          this.shuffle();
+          if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            this.shuffle();
+          }
         }
         disconnectedCallback() {
           cancelAnimationFrame(this.raf);

src/sentry/templatetags/sentry_helpers.py

@@ -111,7 +111,7 @@ def org_url(organization, path, query=None, fragment=None) -> str:
 @register.simple_tag
 def loading_message():
     options = [
-        "Loading a <scraps-bleep>&#%!</scraps-bleep>-ton of JavaScript&hellip;",
+        "Loading a <scraps-bleep>$#!%</scraps-bleep>-ton of JavaScript&hellip;",
         "Escaping <code>node_modules</code> gravity well&hellip;",
         "Parallelizing webpack builders&hellip;",
         "Awaiting solution to the halting problem&hellip;",

static/index.ejs

@@ -79,6 +79,12 @@
                           stroke-dashoffset: -1150;
                       }
                   }
+                  @media (prefers-reduced-motion: reduce) {
+                    path {
+                      animation: none;
+                      stroke-dashoffset: 0;
+                    }
+                  }
               </style>
               <script>
                   const host = document.currentScript.closest('svg');
@@ -121,7 +127,7 @@
         </div>
 
         <div class="loading-message">
-          <p>Loading a <scraps-grawlix>&#%!</scraps-grawlix>-ton of JavaScript&hellip;</p>
+          <p>Loading a <scraps-bleep>$#!%</scraps-bleep>-ton of JavaScript&hellip;</p>
           <p><small>You may need to disable adblocking extensions to load Sentry.</small></p>
           <script>
             function randomFrom(arr) {
@@ -130,7 +136,7 @@
             function randomBetween(min, max) {
               return Math.floor(Math.random() * (max - min - 1) + min);
             }
-            customElements.define('scraps-grawlix', class extends HTMLElement {
+            customElements.define('scraps-bleep', class extends HTMLElement {
               constructor() {
                 super();
                 this.shapes = '◆●▴▪×'.split('');
@@ -157,7 +163,9 @@
                 })
               }
               connectedCallback() {
-                this.shuffle();
+                if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+                  this.shuffle();
+                }
               }
               disconnectedCallback() {
                 cancelAnimationFrame(this.raf);