Merge pull request 'safari-loader-support' (#7) from safari-loader-support into main

Reviewed-on: #7

.idea/workspace.xml

@@ -5,10 +5,8 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="5e320804-68c9-4504-97d5-d421de3438b2" name="Changes" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/web.iml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/web.iml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/lists/[id].vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/[id].vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/lists/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/lists/index.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/LoadingIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/LoadingIcon.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/schedule/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/schedule/index.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -66,7 +64,7 @@
     "RunOnceActivity.git.unshallow": "true",
     "WebServerToolWindowFactoryState": "false",
     "code.cleanup.on.save": "true",
-    "git-widget-placeholder": "unauthenticated-requests",
+    "git-widget-placeholder": "main",
     "last_opened_file_path": "/home/tiradoe/Projects/movie-night/web/src/types",
     "list.type.of.created.stylesheet": "CSS",
     "node.js.detected.package.eslint": "true",
@@ -144,7 +142,7 @@
       <workItem from="1745179755243" duration="40533000" />
       <workItem from="1745366380362" duration="223000" />
       <workItem from="1745366610986" duration="319000" />
-      <workItem from="1745366940811" duration="1222000" />
+      <workItem from="1745366940811" duration="4297000" />
     </task>
     <servers />
   </component>

src/components/LoadingIcon.vue

@@ -7,9 +7,14 @@
     class="flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
     loop
     muted
-    src="/assets/img/movie-loader.webm"
     type="video/webm"
+  >
+    <source
+      src="/assets/img/movie-loader.mp4"
+      type="video/mp4; codecs='hvc1'"
     />
+    <source src="/assets/img/movie-loader.webm" type="video/webm" />
+  </video>
 </template>
 
 <style scoped></style>

src/pages/schedule/index.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="p-5 sm:p-0">
+    <LoadingIcon v-if="loading" />
+    <div v-else>
       <div
         v-if="schedule && schedule?.showings.length < 1 && !loading"
         class="p-5"
       >
         <span>No Showings Found</span>
       </div>
-    <LoadingIcon v-if="loading" />
       <ul class="flex flex-col gap-5">
         <li
           v-for="showing in schedule?.showings"
@@ -33,7 +34,8 @@
       </ul>
 
       <!-- PREVIOUS SHOWINGS -->
-    <div id="previous-showings" class="mt-5 list-group">
+      <LoadingIcon v-if="loadingPrevious" />
+      <div v-else id="previous-showings" class="mt-5 list-group">
         <span
           class="block mb-5 hover-pointer underline"
           @click="getSchedule(true)"
@@ -41,7 +43,10 @@
           Previous Showings
         </span>
         <ul class="flex flex-col gap-5">
-        <li v-for="showing in past_showings" class="p-5 movie-card neon-border">
+          <li
+            v-for="showing in past_showings"
+            class="p-5 movie-card neon-border"
+          >
             <div class="sm:grid grid-cols-2 lg:grid-cols-3">
               <img
                 :src="showing.movie.poster"
@@ -59,6 +64,7 @@
         </ul>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -72,6 +78,7 @@ const past_showings = defineModel<Showing[]>("past_showings", {
   default: [],
 });
 const loading = ref(true);
+const loadingPrevious = ref(false);
 const got_previous = ref(false);
 const months = [
   "January",
@@ -96,7 +103,9 @@ const formatDate = function (date_string: string) {
 };
 
 const getSchedule = async function (previous = false) {
-  loading.value = true;
+  if (previous) loadingPrevious.value = true;
+  else loading.value = true;
+
   let config = useRuntimeConfig();
   if (got_previous.value) {
     return false;
@@ -124,6 +133,7 @@ const getSchedule = async function (previous = false) {
         schedule.value = data;
       }
       loading.value = false;
+      loadingPrevious.value = false;
     })
     .catch((err) => {
       switch (err.statusCode) {
@@ -133,6 +143,7 @@ const getSchedule = async function (previous = false) {
           break;
         case 404:
           alert("Unable to find schedule");
+          navigateTo("/");
           break;
       }
     });