Add default loader colors

availabili.tf/src/components/LoaderContainer.vue

@@ -1,11 +1,24 @@
 <script setup lang="ts">
-import Loader from './Loader.vue';
+import { ContentLoader } from "vue-content-loader";
+
+const props = defineProps<{
+  width?: string;
+  height?: string;
+  speed?: number;
+}>();
+
+// get primary color from var(--overlay-0) and secondary from var(--overlay-1)
+const primaryColor = getComputedStyle(document.documentElement).getPropertyValue("--surface-0");
+
+const secondaryColor = getComputedStyle(document.documentElement).getPropertyValue("--overlay-0");
 </script>
 
 <template>
-  <div class="loader-container">
-    <Loader />
-  </div>
+  <!--ContentLoader :width="width" :height="height" :speed="speed">
+  </ContentLoader-->
+  <component :is="ContentLoader" v-bind="{ ...props, primaryColor, secondaryColor }">
+    <slot></slot>
+  </component>
 </template>
 
 <style scoped>

availabili.tf/src/components/TeamsListSidebar.vue

@@ -5,6 +5,7 @@ import { RouterLink } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import InviteKeyDialog from "./InviteKeyDialog.vue";
 import { ContentLoader } from "vue-content-loader";
+import LoaderContainer from "./LoaderContainer.vue";
 
 const teams = useTeamsStore();
 const isLoading = ref(false);
@@ -43,17 +44,13 @@ onMounted(() => {
     <div v-if="!authStore.isLoggedIn">
       Log in to view your teams.
     </div>
-    <div v-else-if="isLoading || true">
-      <ContentLoader :speed="1">
-        <circle cx="10" cy="20" r="8" />
-        <rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
-        <circle cx="10" cy="50" r="8" />
-        <rect x="25" y="45" rx="5" ry="5" width="220" height="10" />
-        <circle cx="10" cy="80" r="8" />
-        <rect x="25" y="75" rx="5" ry="5" width="220" height="10" />
-        <circle cx="10" cy="110" r="8" />
-        <rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
-      </ContentLoader>
+    <div v-else-if="isLoading">
+      <LoaderContainer>
+        <rect x="0" y="15" rx="5" ry="5" width="220" height="10" />
+        <rect x="0" y="45" rx="5" ry="5" width="220" height="10" />
+        <rect x="0" y="75" rx="5" ry="5" width="220" height="10" />
+        <rect x="0" y="105" rx="5" ry="5" width="220" height="10" />
+      </LoaderContainer>
     </div>
     <div
       v-else-if="teams.teamsWithRole"

availabili.tf/src/views/TeamDetailsView.vue

@@ -11,6 +11,7 @@ import { useTeamsEventsStore } from "@/stores/teams/events";
 import MatchCard from "@/components/MatchCard.vue";
 import { useMatchesStore } from "@/stores/matches";
 import { ContentLoader } from "vue-content-loader";
+import LoaderContainer from "@/components/LoaderContainer.vue";
 
 const route = useRoute();
 const teamsStore = useTeamsStore();
@@ -59,10 +60,10 @@ onMounted(() => {
         <div class="left">
           <center class="margin">
             <h1>
-              <template v-if="isLoading || true">
-                <content-loader view-box="0 0 250 10">
+              <template v-if="isLoading">
+                <LoaderContainer view-box="0 0 250 10">
                   <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
-                </content-loader>
+                </LoaderContainer>
               </template>
               <template v-else>
                 {{ team.teamName }}

availabili.tf/src/views/TeamSettings/GeneralView.vue

@@ -5,6 +5,7 @@ import { onMounted, ref } from "vue";
 import { useTeamsStore } from "@/stores/teams";
 import { useTeamDetails } from "@/composables/team-details";
 import { computed } from "@vue/reactivity";
+import LoaderContainer from "@/components/LoaderContainer.vue";
 
 const {
   teamName,
@@ -51,20 +52,20 @@ const hasChangedTimeDetails = computed(() => {
   );
 });
 
-const isLoaded = ref(false);
+const isLoading = ref(false);
 
 const teamsStore = useTeamsStore();
 
 const team = computed(() => teamsStore.teams[teamId.value]);
 
 onMounted(() => {
-  isLoaded.value = true;
+  isLoading.value = true;
   teamsStore.fetchTeam(teamId.value)
     .then((response) => {
       teamName.value = response.team.teamName;
       timezone.value = response.team.tzTimezone;
       minuteOffset.value = response.team.minuteOffset;
-      isLoaded.value = false;
+      isLoading.value = false;
     });
 })
 </script>
@@ -72,7 +73,15 @@ onMounted(() => {
 <template>
   <div class="team-general-settings">
     <h2>Overview</h2>
-    <div>
+    <LoaderContainer v-if="isLoading">
+      <rect x="0" y="10" rx="5" width="40" height="10" />
+      <rect x="0" y="30" rx="5" width="100%" height="10" />
+      <rect x="0" y="50" rx="5" width="80" height="10" />
+      <rect x="250" y="50" rx="5" width="40" height="10" />
+      <rect x="0" y="70" rx="5" width="240" height="10" />
+      <rect x="250" y="70" rx="5" width="100" height="10" />
+    </LoaderContainer>
+    <div v-else>
       <div class="form-group margin">
         <h3 class="closer">Team Name</h3>
         <input v-model="teamName" />

availabili.tf/src/views/TeamSettings/IntegrationsView.vue

@@ -6,7 +6,6 @@ import { useTeamDetails } from "@/composables/team-details";
 import { useTeamsStore } from "@/stores/teams";
 import { useIntegrationsStore } from "@/stores/teams/integrations";
 import { onMounted, ref } from "vue";
-import { ContentLoader } from "vue-content-loader";
 
 const teamsStore = useTeamsStore();
 const integrationsStore = useIntegrationsStore();
@@ -33,14 +32,14 @@ onMounted(() => {
 <template>
   <div class="team-integrations">
     <div v-if="isLoading">
-      <ContentLoader>
-        <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
-        <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
-        <rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
-        <rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
-        <rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
-        <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
-      </ContentLoader>
+      <LoaderContainer>
+        <rect x="0" y="0" rx="5" ry="5" width="250" height="10" />
+        <rect x="20" y="20" rx="5" ry="5" width="220" height="10" />
+        <rect x="20" y="40" rx="5" ry="5" width="170" height="10" />
+        <rect x="0" y="60" rx="5" ry="5" width="250" height="10" />
+        <rect x="20" y="80" rx="5" ry="5" width="200" height="10" />
+        <rect x="20" y="100" rx="5" ry="5" width="80" height="10" />
+      </LoaderContainer>
     </div>
     <template v-else>
       <DiscordIntegrationForm v-model="integrationsStore.discordIntegration" />