From d1c5e8987ffc0ec0c8c445cd6ed1ea32d74ad1c5 Mon Sep 17 00:00:00 2001
From: HumanoidSandvichDispenser <humanoidsandvichdispenser@gmail.com>
Date: Sat, 30 Nov 2024 20:00:37 -0800
Subject: [PATCH] feat(components): Add loader to roster builder

---
 availabili.tf/src/components/Loader.vue       | 39 +++++++++++++++++++
 .../src/components/LoaderContainer.vue        | 18 +++++++++
 availabili.tf/src/stores/roster.ts            |  2 +-
 availabili.tf/src/views/RosterBuilderView.vue | 23 +++++++++--
 4 files changed, 77 insertions(+), 5 deletions(-)
 create mode 100644 availabili.tf/src/components/Loader.vue
 create mode 100644 availabili.tf/src/components/LoaderContainer.vue

diff --git a/availabili.tf/src/components/Loader.vue b/availabili.tf/src/components/Loader.vue
new file mode 100644
index 0000000..2322c4f
--- /dev/null
+++ b/availabili.tf/src/components/Loader.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="loader">
+  </div>
+</template>
+
+<style scoped>
+.loader {
+  width: 12px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  animation: loader-anim 1s infinite linear;
+}
+
+@keyframes loader-anim {
+  0%  {
+    box-shadow: 20px 4px var(--overlay-0), -20px -4px var(--overlay-0);
+    background: var(--overlay-0);
+  }
+  25% {
+    box-shadow: 20px 0 var(--overlay-0), -20px 0 var(--overlay-0);
+    background: var(--overlay-0);
+  }
+  50% {
+    box-shadow: 20px -4px var(--overlay-0), -20px 4px var(--overlay-0);
+    background: var(--overlay-0);
+  }
+  75% {
+    box-shadow: 20px 0 var(--overlay-0), -20px 0 var(--overlay-0);
+    background: var(--overlay-0);
+  }
+  100% {
+    box-shadow: 20px 4px var(--overlay-0), -20px -4px var(--overlay-0);
+    background: var(--overlay-0);
+  }
+}
+</style>
diff --git a/availabili.tf/src/components/LoaderContainer.vue b/availabili.tf/src/components/LoaderContainer.vue
new file mode 100644
index 0000000..3b25141
--- /dev/null
+++ b/availabili.tf/src/components/LoaderContainer.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import Loader from './Loader.vue';
+</script>
+
+<template>
+  <div class="loader-container">
+    <Loader />
+  </div>
+</template>
+
+<style scoped>
+.loader-container {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/availabili.tf/src/stores/roster.ts b/availabili.tf/src/stores/roster.ts
index 56163fe..8200e59 100644
--- a/availabili.tf/src/stores/roster.ts
+++ b/availabili.tf/src/stores/roster.ts
@@ -111,7 +111,7 @@ export const useRosterStore = defineStore("roster", () => {
   }
 
   function fetchAvailablePlayers(startTime: number, teamId: number) {
-    clientStore.call(
+    return clientStore.call(
       fetchAvailablePlayers.name,
       () => client.default.viewAvailableAtTime(startTime.toString(), teamId),
       (response) => {
diff --git a/availabili.tf/src/views/RosterBuilderView.vue b/availabili.tf/src/views/RosterBuilderView.vue
index d0897dc..a341c47 100644
--- a/availabili.tf/src/views/RosterBuilderView.vue
+++ b/availabili.tf/src/views/RosterBuilderView.vue
@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import PlayerCard from "../components/PlayerCard.vue";
-import { computed, reactive, onMounted } from "vue";
+import { computed, reactive, onMounted, ref } from "vue";
 import { useRosterStore } from "../stores/roster";
 import { useRoute } from "vue-router";
 import moment from "moment";
 import { useEventsStore } from "@/stores/events";
 import EventSchedulerForm from "@/components/EventSchedulerForm.vue";
 import { useEventForm } from "@/composables/event-form";
+import Loader from "@/components/Loader.vue";
+import LoaderContainer from "@/components/LoaderContainer.vue";
 
 const rosterStore = useRosterStore();
 const eventsStore = useEventsStore();
 
 const route = useRoute();
 
+const isLoading = ref(false);
+
 const hasAvailablePlayers = computed(() => {
   return rosterStore.availablePlayerRoles.length > 0;
 });
@@ -28,22 +32,33 @@ function closeSelection() {
 }
 
 onMounted(async () => {
+  isLoading.value = true;
+
   if (eventId.value) {
     const event = await eventsStore.fetchEvent(eventId.value);
     rosterStore.startTime = moment(event.startTime).unix();
     rosterStore.title = event.name;
     rosterStore.description = event.description;
     Object.assign(rosterStore.selectedPlayers, { });
-    rosterStore.fetchPlayersFromEvent(eventId.value);
+    rosterStore.fetchPlayersFromEvent(eventId.value)
+      .then(() => {
+        isLoading.value = false;
+      });
   } else {
     rosterStore.startTime = Number(route.params.startTime);
-    rosterStore.fetchAvailablePlayers(rosterStore.startTime, Number(route.params.teamId));
+    rosterStore.fetchAvailablePlayers(rosterStore.startTime, Number(route.params.teamId))
+      .then(() => {
+        isLoading.value = false;
+      });
   }
 });
 </script>
 
 <template>
-  <main>
+  <main v-if="isLoading">
+    <LoaderContainer />
+  </main>
+  <main v-else>
     <div class="top">
       <a>
         <i class="bi bi-arrow-left" />