feat(components): Add loader to roster builder

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>

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>

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

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" />