fixed safari loading icon...again

src/components/LoadingIcon.vue

@@ -1,5 +1,3 @@
-<script lang="ts" setup></script>
-
 <template>
   <video
     alt="Loading"
@@ -9,9 +7,27 @@
     muted
     playsinline
   >
-    <source src="/assets/img/movie-loader.mov" type="video/quicktime" />
-    <source src="/assets/img/movie-loader.webm" type="video/webm" />
+    <source
+      v-if="supportsHEVC"
+      src="/assets/img/movie-loader.mov"
+      type="video/quicktime"
+    />
+    <source v-else src="/assets/img/movie-loader.webm" type="video/webm" />
   </video>
 </template>
 
+<script lang="ts" setup>
+const supportsHEVC = ref(false);
+
+onMounted(() => {
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+  // iOS devices also support HEVC
+  const isIOS =
+    /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream;
+
+  supportsHEVC.value = isSafari || isIOS;
+});
+</script>
+
 <style scoped></style>