src/components/LoadingIcon.vue

@@ -1,23 +1,22 @@
 <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
-    playsinline
+  <div
+    class="flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex-col"
   >
-    <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>
+    <video alt="Loading" autoplay class="max-h-52" loop muted playsinline>
+      <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>
+    <MovieQuote v-if="props.showQuote" />
+  </div>
 </template>
 
 <script lang="ts" setup>
 const supportsHEVC = ref(false);
+const props = defineProps(["showQuote"]);
 
 onMounted(() => {
   const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

src/components/MovieQuote.vue

@@ -0,0 +1,54 @@
+<template>
+  <blockquote
+    class="flex flex-col gap-10 movie-card p-10 neon-border text-center"
+  >
+    <span>
+      {{ quote.quote }}
+    </span>
+
+    <div class="flex gap-2 italic flex-col">
+      <span>{{ quote.actor }}</span>
+      <span>{{ quote.movie }}</span>
+    </div>
+  </blockquote>
+</template>
+
+<style scoped></style>
+<script lang="ts" setup>
+const quotes = [
+  {
+    actor: "Darren Ewing as Arnold",
+    movie: "Troll 2",
+    quote: "They're eating her... and then they're going to eat me! OH MY GOD!",
+  },
+  {
+    actor: "Tommy Wiseau as Johnny",
+    movie: "The Room",
+    quote: "You're tearing me apart, Lisa!",
+  },
+  {
+    actor: "Arnold Schwaarzenegger as T-800",
+    movie: "Terminator 2: Judgment Day",
+    quote: "Hasta la vista, baby.",
+  },
+  {
+    actor: "Karolyn Grimes as Zuzu",
+    movie: "It's a Wonderful Life",
+    quote: "Every time a bell rings, an angel gets his wings.",
+  },
+  {
+    actor: "Pat Morita as Mr. Miyagi",
+    movie: "The Karate Kid",
+    quote: "Wax on, Wax off",
+  },
+  {
+    actor: "Dolph Lundgren as Drago",
+    movie: "Rocky 4",
+    quote: "I must break you.",
+  },
+];
+
+const randomQuote = () => quotes[Math.floor(Math.random() * quotes.length)];
+
+const quote = ref(randomQuote());
+</script>

src/components/admin/search.vue

@@ -1,4 +1,5 @@
 <template>
+  <LoadingIcon v-if="loading" class="p-1 bg-gray-900 rounded-3xl" />
   <form class="py-3 p-sm-0 align-items-center" @submit="findMovies">
     <label class="px-0" for="search-field">Search</label>
     <div class="px-0 mx-0">
@@ -19,6 +20,8 @@
 <script lang="ts" setup>
 import type { Movie } from "~/types/movie";
 
+const loading = ref(false);
+
 const emit = defineEmits<{
   (e: "show-modal", movie: Movie): void;
 }>();
@@ -31,6 +34,7 @@ const showModal = (movie: Movie) => {
 const findMovies = async function (e: Event) {
   let config = useRuntimeConfig();
   e.preventDefault();
+  loading.value = true;
   let searchTerm = (document.getElementById("search-field") as HTMLInputElement)
     ?.value;
 
@@ -60,6 +64,7 @@ const findMovies = async function (e: Event) {
       movies.value = data.value || [];
     }
   }
+  loading.value = false;
 };
 </script>
 

src/pages/lists/[id].vue

@@ -1,5 +1,5 @@
 <template>
-  <LoadingIcon v-if="loading" />
+  <LoadingIcon v-if="loading" show-quote="true" />
   <div v-else class="p-5 sm:p-0">
     <Modal ref="movie_modal">
       <ShowMovie
@@ -11,7 +11,10 @@
       ></ShowMovie>
     </Modal>
     <h2 class="text-xl font-bold pb-5">{{ list.name }}</h2>
-    <div class="grid grid-cols-2 rounded movie-card neon-border p-5">
+    <div
+      v-if="movies.length > 1 && !loading"
+      class="grid grid-cols-2 rounded movie-card neon-border p-5"
+    >
       <div>
         <ul class="flex flex-row">
           <li>
@@ -34,8 +37,13 @@
       />
     </div>
 
+    <div v-if="movies.length < 1 && !loading" class="mt-10 flex gap-5 flex-col">
+      No Movies Found
+      <MovieQuote />
+    </div>
     <!-- MOVIE LIST -->
     <ul
+      v-else
       class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 mt-5"
     >
       <li

src/pages/lists/index.vue

@@ -1,9 +1,15 @@
 <template>
-  <div class="p-5 sm:p-0">
-    <div v-if="lists.length < 1 && !loading">
+  <div>
+    <LoadingIcon
+      v-if="loading"
+      class="w-full p-5 sm:p-0 max-w-2xl"
+      show-quote="true"
+    />
+
+    <div v-if="lists.length < 1 && !loading" class="flex flex-col gap-10">
       <p>No lists found</p>
+      <MovieQuote />
     </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">

src/pages/schedule/index.vue

@@ -7,6 +7,7 @@
         class="p-5"
       >
         <span>No Showings Found</span>
+        <MovieQuote />
       </div>
       <ul class="flex flex-col gap-5">
         <li
@@ -35,7 +36,7 @@
 
       <!-- PREVIOUS SHOWINGS -->
       <LoadingIcon v-if="loadingPrevious" />
-      <div v-else id="previous-showings" class="mt-5 list-group">
+      <div v-else id="previous-showings" class="p-5 mt-5 list-group">
         <span
           class="block mb-5 hover-pointer underline"
           @click="getSchedule(true)"