.idea/dictionaries/project.xml

@@ -1,3 +0,0 @@
-<component name="ProjectDictionaryState">
-  <dictionary name="project" />
-</component>

.idea/jsLibraryMappings.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <file url="file://$PROJECT_DIR$/src" libraries="{web/src/node_modules}" />
-    <file url="PROJECT" libraries="{@types/tailwindcss, web/src/node_modules}" />
-  </component>
-</project>

.idea/tailwindcss.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="TailwindSettings">
-    <option name="lspConfiguration" value="{&#10;  &quot;includeLanguages&quot;: {&#10;    &quot;ftl&quot;: &quot;html&quot;,&#10;    &quot;jinja&quot;: &quot;html&quot;,&#10;    &quot;jinja2&quot;: &quot;html&quot;,&#10;    &quot;smarty&quot;: &quot;html&quot;,&#10;    &quot;tmpl&quot;: &quot;gohtml&quot;,&#10;    &quot;cshtml&quot;: &quot;html&quot;,&#10;    &quot;vbhtml&quot;: &quot;html&quot;,&#10;    &quot;razor&quot;: &quot;html&quot;,&#10;    &quot;scss&quot;: &quot;scss&quot;,&#10;    &quot;html&quot;: &quot;html&quot;,&#10;    &quot;javascript&quot;: &quot;javascript&quot;,&#10;    &quot;typescript&quot;: &quot;typescript&quot;,&#10;    &quot;css&quot;: &quot;css&quot;,&#10;    &quot;vue&quot;: &quot;vue&quot;,&#10;    &quot;sass&quot;: &quot;sass&quot;,&#10;    &quot;twig&quot;: &quot;twig&quot;&#10;  },&#10;  &quot;files&quot;: {&#10;    &quot;exclude&quot;: [&#10;      &quot;**/.git/**&quot;,&#10;      &quot;**/node_modules/**&quot;,&#10;      &quot;**/.hg/**&quot;,&#10;      &quot;**/.svn/**&quot;&#10;    ]&#10;  },&#10;  &quot;emmetCompletions&quot;: false,&#10;  &quot;classAttributes&quot;: [&quot;class&quot;, &quot;className&quot;, &quot;ngClass&quot;],&#10;  &quot;colorDecorators&quot;: true,&#10;  &quot;showPixelEquivalents&quot;: true,&#10;  &quot;rootFontSize&quot;: 16,&#10;  &quot;hovers&quot;: true,&#10;  &quot;suggestions&quot;: true,&#10;  &quot;codeActions&quot;: true,&#10;  &quot;validate&quot;: true,&#10;  &quot;lint&quot;: {&#10;    &quot;invalidScreen&quot;: &quot;error&quot;,&#10;    &quot;invalidVariant&quot;: &quot;error&quot;,&#10;    &quot;invalidTailwindDirective&quot;: &quot;error&quot;,&#10;    &quot;invalidApply&quot;: &quot;error&quot;,&#10;    &quot;invalidConfigPath&quot;: &quot;error&quot;,&#10;    &quot;cssConflict&quot;: &quot;warning&quot;,&#10;    &quot;recommendedVariantOrder&quot;: &quot;warning&quot;&#10;  },&#10;  &quot;experimental&quot;: {&#10;    &quot;configFile&quot;: null,&#10;    &quot;classRegex&quot;: []&#10;  }&#10;}" />
-  </component>
-</project>

.idea/web.iml

@@ -4,6 +4,5 @@
     <content url="file://$MODULE_DIR$" />
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="@types/tailwindcss" level="application" />
   </component>
 </module>

.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/pages/schedule/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/schedule/index.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -16,7 +14,7 @@
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
-  <component name="ComposerSettings" synchronizationState="SYNCHRONIZE">
+  <component name="ComposerSettings">
     <execution />
   </component>
   <component name="FileTemplateManagerImpl">
@@ -25,7 +23,6 @@
         <option value="CSS File" />
         <option value="Vue Single File Component" />
         <option value="TypeScript File" />
-        <option value="Vue Composition API Component" />
       </list>
     </option>
   </component>
@@ -79,14 +76,9 @@
     "npm.dev.executor": "Run",
     "prettierjs.PrettierConfiguration.Package": "/home/tiradoe/Projects/movie-night/web/src/node_modules/prettier",
     "rearrange.code.on.save": "true",
-    "settings.editor.selected.configurable": "configurable.group.editor",
+    "settings.editor.selected.configurable": "settings.vue",
     "ts.external.directory.path": "/home/tiradoe/Projects/movie-night/web/src/node_modules/typescript/lib",
     "vue.rearranger.settings.migration": "true"
-  },
-  "keyToStringList": {
-    "vue.recent.templates": [
-      "Vue Composition API Component"
-    ]
   }
 }]]></component>
   <component name="RecentsManager">
@@ -141,10 +133,7 @@
       <workItem from="1743904898331" duration="20256000" />
       <workItem from="1743998844137" duration="23268000" />
       <workItem from="1744430699183" duration="32152000" />
-      <workItem from="1745179755243" duration="40533000" />
+      <workItem from="1745179755243" duration="37963000" />
-      <workItem from="1745366380362" duration="223000" />
-      <workItem from="1745366610986" duration="319000" />
-      <workItem from="1745366940811" duration="1222000" />
     </task>
     <servers />
   </component>

src/components/LoadingIcon.vue

@@ -1,15 +0,0 @@
-<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,5 +1,4 @@
 <template>
-  <LoadingIcon v-if="loading" />
   <div v-if="list_id !== 0" class="p-5 sm:p-0">
     <Modal ref="movie_modal">
       <ShowMovie
@@ -74,7 +73,6 @@ 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: [],
@@ -85,7 +83,6 @@ 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",
@@ -103,7 +100,6 @@ 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,10 +1,8 @@
 <template>
   <div class="p-5 sm:p-0">
-    <div v-if="lists.length < 1 && !loading">
+    <div v-if="lists.length < 1">
       <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">
@@ -23,10 +21,7 @@ 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",
@@ -42,7 +37,6 @@ const updateLists = async function () {
   })
     .then((data) => {
       lists.value = data || [];
-      loading.value = false;
     })
     .catch((err) => {
       if (err.statusCode === 401) {

src/pages/schedule/index.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="p-5 sm:p-0">
-    <div
+    <div v-if="schedule && schedule?.showings.length < 1" class="p-5">
-      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"
@@ -40,6 +36,7 @@
       >
         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">
@@ -71,7 +68,6 @@ 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",
@@ -96,12 +92,13 @@ 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";
 
@@ -123,7 +120,7 @@ const getSchedule = async function (previous = false) {
       } else {
         schedule.value = data;
       }
-      loading.value = false;
+      document.getElementById("loader")?.classList.toggle("hidden");
     })
     .catch((err) => {
       switch (err.statusCode) {