Replace large gif with 10x smaller videos

Fixes #8

.gitattributes

@@ -0,0 +1,2 @@
+frontend/assets/img/logo_loading_animation_v1.mp4 filter=lfs diff=lfs merge=lfs -text
+frontend/assets/img/logo_loading_animation_v1.webm filter=lfs diff=lfs merge=lfs -text

frontend/components/modal/Loading.vue

@@ -37,11 +37,22 @@ watch(() => loading.value, refreshZIndex)
     class="loading-modal"
   >
     <div @click="() => { toggleDebug() } ">
-      <!-- TODO(#8) Swap out this reference -->
-      <img
-        src="@/assets/img/logo_loading_animation_v1.gif"
-        class="gif shadow-3"
+      <video
+        class="loading-animation shadow-3"
+        autoplay
+        loop
+        muted
+        playsinline
       >
+        <source
+          src="@/assets/img/logo_loading_animation_v1.webm"
+          type="video/webm"
+        >
+        <source
+          src="@/assets/img/logo_loading_animation_v1.mp4"
+          type="video/mp4"
+        >
+      </video>
     </div>
     <ul
       v-if="debug"
@@ -72,7 +83,7 @@ watch(() => loading.value, refreshZIndex)
   align-items: center;
   background: rgb(255 255 255 / 60%);
 
-  .gif {
+  .loading-animation {
     width: 50vw;
     max-width: 10rem;
   }