added loading icon

src/components/LoadingIcon.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup></script>
+
+<template>
+  <video
+    alt="Loading"
+    autoplay
+    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"
+  />
+</template>
+
+<style scoped></style>

src/pages/lists/[id].vue

@@ -1,4 +1,5 @@
 <template>
+  <LoadingIcon v-if="loading" />
   <div v-if="list_id !== 0" class="p-5 sm:p-0">
     <Modal ref="movie_modal">
       <ShowMovie
@@ -73,6 +74,7 @@ import { useCookie } from "#app";
 
 const list_id = ref(0);
 const list = defineModel<MovieList>("movie_list", { default: [] });
+const loading = ref(true);
 const modal_movie: Ref<Movie | null> = ref(null);
 const movies = defineModel<Movie[] | []>("movies", {
   default: [],
@@ -83,6 +85,7 @@ const logged_in = ref(false);
 const hide_scheduled = ref(false);
 
 const getList = async function (list_id: number) {
+  loading.value = true;
   let config = useRuntimeConfig();
   let headers: any = {
     "Content-type": "application/json",
@@ -100,6 +103,7 @@ const getList = async function (list_id: number) {
       list.value = data;
       movies.value = data?.movies || [];
       filtered_movies.value = movies.value;
+      loading.value = false;
     })
     .catch((err) => {
       if (err.statusCode === 401) {

src/pages/lists/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="p-5 sm:p-0">
-    <div v-if="lists.length < 1">
+    <div v-if="lists.length < 1 && !loading">
       <p>No lists found</p>
     </div>
+    <LoadingIcon v-if="loading" />
+
     <ul class="grid grid-cols-2 gap-3 mt-5">
       <li v-for="list in lists" class="movie-card neon-border p-5 rounded">
         <div class="grid grid-rows-2 gap-3">
@@ -21,7 +23,10 @@ import type { MovieList } from "~/types/movielist";
 import { useCookie } from "#app";
 
 const lists = defineModel<MovieList[]>("movie_list", { default: [] });
+const loading = ref(true);
+
 const updateLists = async function () {
+  loading.value = true;
   let config = useRuntimeConfig();
   let headers: any = {
     "Content-type": "application/json",
@@ -37,6 +42,7 @@ const updateLists = async function () {
   })
     .then((data) => {
       lists.value = data || [];
+      loading.value = false;
     })
     .catch((err) => {
       if (err.statusCode === 401) {

src/pages/schedule/index.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="p-5 sm:p-0">
-    <div v-if="schedule && schedule?.showings.length < 1" class="p-5">
+    <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"
@@ -36,7 +40,6 @@
       >
         Previous Showings
       </span>
-      <span id="loader" class="hidden">Loading...</span>
       <ul class="flex flex-col gap-5">
         <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">
@@ -68,6 +71,7 @@ const schedule = defineModel<Schedule>("schedule");
 const past_showings = defineModel<Showing[]>("past_showings", {
   default: [],
 });
+const loading = ref(true);
 const got_previous = ref(false);
 const months = [
   "January",
@@ -92,13 +96,12 @@ const formatDate = function (date_string: string) {
 };
 
 const getSchedule = async function (previous = false) {
+  loading.value = true;
   let config = useRuntimeConfig();
   if (got_previous.value) {
     return false;
   }
 
-  document.getElementById("loader")?.classList.toggle("hidden");
-
   let params = "";
   if (previous) params = "?past_showings=true";
 
@@ -120,7 +123,7 @@ const getSchedule = async function (previous = false) {
       } else {
         schedule.value = data;
       }
-      document.getElementById("loader")?.classList.toggle("hidden");
+      loading.value = false;
     })
     .catch((err) => {
       switch (err.statusCode) {