Merge pull request 'add-loading-icon' (#6) from add-loading-icon into main

Reviewed-on: #6

.idea/dictionaries/project.xml

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

.idea/jsLibraryMappings.xml

@@ -0,0 +1,7 @@
+<?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

@@ -0,0 +1,6 @@
+<?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,5 +4,6 @@
     <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,8 +5,10 @@
   </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" />
@@ -14,7 +16,7 @@
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
-  <component name="ComposerSettings">
+  <component name="ComposerSettings" synchronizationState="SYNCHRONIZE">
     <execution />
   </component>
   <component name="FileTemplateManagerImpl">
@@ -23,6 +25,7 @@
         <option value="CSS File" />
         <option value="Vue Single File Component" />
         <option value="TypeScript File" />
+        <option value="Vue Composition API Component" />
       </list>
     </option>
   </component>
@@ -76,9 +79,14 @@
     "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": "settings.vue",
+    "settings.editor.selected.configurable": "configurable.group.editor",
     "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">
@@ -133,7 +141,10 @@
       <workItem from="1743904898331" duration="20256000" />
       <workItem from="1743998844137" duration="23268000" />
       <workItem from="1744430699183" duration="32152000" />
-      <workItem from="1745179755243" duration="37963000" />
+      <workItem from="1745179755243" duration="40533000" />
+      <workItem from="1745366380362" duration="223000" />
+      <workItem from="1745366610986" duration="319000" />
+      <workItem from="1745366940811" duration="1222000" />
     </task>
     <servers />
   </component>

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) {