added placeholder quotes

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>