ref(ui) Replace the loading gif with an mp4 (#20735)

The gif is 67KB while the new mp4 is 17KB. I've left the gif behind as
I suspect it is also referenced in getsentry.

src/sentry/static/sentry/app/components/loadingIndicator.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import classNames from 'classnames';
 import {withProfiler} from '@sentry/react';
 
+import spinnerVideo from '../../images/sentry-loader.mp4';
+
 type Props = {
   overlay?: boolean;
   dark?: boolean;
@@ -59,6 +61,11 @@ function LoadingIndicator(props: Props) {
     <div className={cx} style={style}>
       {!hideSpinner && (
         <div className={loadingCx} style={loadingStyle}>
+          {triangle && (
+            <video autoPlay disablePictureInPicture loop height="150">
+              <source src={spinnerVideo} type="video/mp4" />
+            </video>
+          )}
           {finished ? <div className="checkmark draw" style={style} /> : null}
         </div>
       )}

src/sentry/static/sentry/app/index.html

@@ -16,7 +16,12 @@
     <div id="blk_router">
       <div class="loading triangle">
         <div class="loading-mask"></div>
-        <div class="loading-indicator"></div>
+
+        <div class="loading-indicator">
+          <video autoplay disablePictureInPicture loop height="150">
+            <source src="_assets/images/sentry-loader.mp4" type="video/mp4" />
+          </video>
+        </div>
         <div class="loading-message">
           <p>Please wait while we load an obnoxious amount of JavaScript.</p>
           <p>

src/sentry/static/sentry/less/shared-components.less

@@ -592,8 +592,7 @@ table.table.key-value {
   }
 }
 
-// Loading Gif
-
+// Spinning logo icon loader
 .loading.triangle {
   position: absolute;
   top: 50%;
@@ -606,9 +605,10 @@ table.table.key-value {
     border: 0;
     animation: none;
     -webkit-animation: none;
-    background-image: url(../images/sentry-loader.gif);
-    .square(150px);
-    background-size: contain;
+    height: 150px;
+    width: 150px;
+    overflow: hidden;
+    border-radius: 50%;
   }
 }
 

src/sentry/templates/sentry/bases/react.html

@@ -1,12 +1,19 @@
 {% extends "sentry/layout.html" %}
 
 {% load sentry_api %}
+{% load sentry_assets %}
 
 {% block body %}
   <div id="blk_router">
     <div class="loading triangle">
       <div class="loading-mask"></div>
-      <div class="loading-indicator"></div>
+
+      <div class="loading-indicator">
+        <video autoplay disablePictureInPicture loop height="150">
+          <source src="{% asset_url "sentry" "images/sentry-loader.mp4" %}" type="video/mp4" />
+        </video>
+      </div>
+
       <div class="loading-message">
         <p>Please wait while we load an obnoxious amount of JavaScript.</p>
         <p><small>You may need to disable adblocking extensions to load Sentry.</small></p>