Реализовал прелоадеры на страницу расписания

resources/views/Preloader/Preloader.vue

@@ -1,22 +0,0 @@
-<template>
-    <v-dialog
-        class=""
-        :model-value="true"
-        width="auto"
-        persistent
-    >
-        <PreloaderWindow/>
-    </v-dialog>
-</template>
-
-<script>
-import PreloaderWindow from "./PreloaderWindow.vue";
-
-export default {
-    name: "Preloader"
-}
-</script>
-
-<style scoped>
-
-</style>

resources/views/Preloader/PreloaderWindow.vue

@@ -1,15 +0,0 @@
-<template>
-    <div class="window glass rounded-lg d-flex flex-column justify-center align-center px-2">
-        <v-progress-linear indeterminate rounded="lg"/>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "PreloaderWindow"
-}
-</script>
-
-<style scoped>
-
-</style>

resources/views/Schedule.vue

@@ -1,7 +1,8 @@
 <template>
     <v-sheet class="mt-5 mb-5 rounded-lg w-75">
         <p class="text-h3 ma-5">Расписание стримов</p>
-        <p class="ma-5 text-h4">{{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
+        <v-skeleton-loader v-if="fetching" type="text" />
+        <p v-else class="ma-5 text-h4"> {{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
         <ScheduleTable/>
         <p class="text-h3 ma-5">Ссылочки</p>
         <Links/>
@@ -12,28 +13,31 @@
 import axios from "axios";
 import ScheduleTable from "./Schedule/ScheduleTable.vue";
 import Links from "./Schedule/Links.vue";
-import {useScheduleStore} from '../stores/Schedule.js';
 
 export default {
     name: "Schedule",
     components: {Links, ScheduleTable},
     data: () => ({
-        dates: []
+        dates: [],
+        fetching: true
     }),
     methods: {
         parseDate(date){
             let dateArr = date.split("-");
             return dateArr[2] + "." + dateArr[1];
-        }
         },
-    mounted() {
+        async getDates(){
-        axios
+            await axios
                 .get('/api/v1/dates')
                 .then(response => {
                     this.dates = response.data;
-                useScheduleStore().fetchingDates = false;
+                    this.fetching = false;
                 });
         }
+    },
+    mounted() {
+        this.getDates();
+    }
 }
 </script>
 

resources/views/Schedule/Links.vue

@@ -1,18 +1,18 @@
 <script>
     import axios from "axios";
-    import {useScheduleStore} from '../../stores/Schedule.js';
 
     export default {
         name: "Links",
         data: () => ({
-            links: []
+            links: [],
+            fetching: true
         }),
         mounted() {
             axios
                 .get('/api/v1/links')
                 .then(response => {
                     this.links = response.data;
-                    useScheduleStore().fetchingLinks = false;
+                    this.fetching = false;
                 });
         }
     }
@@ -21,7 +21,8 @@
 <template>
     <div class="w-100 d-flex justify-center">
         <v-list class="w-66">
-            <v-list-item class="ma-5 bg-gradient-noh" elevation="6" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" -->
+            <v-skeleton-loader v-if="fetching" type="list-item"/>
+            <v-list-item v-else class="ma-5 bg-gradient-noh" elevation="6" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" -->
                 <template v-slot:prepend>
                     <v-avatar :image="link.image" rounded="0"></v-avatar>
                 </template>

resources/views/Schedule/ScheduleTable.vue

@@ -1,11 +1,11 @@
 <script>
     import axios from "axios";
-    import {useScheduleStore} from '../../stores/Schedule.js';
 
     export default {
         name: "ScheduleTable",
         data: () => ({
-            schedules: []
+            schedules: [],
+            fetching: true
         }),
         methods: {
             parseDate(date){
@@ -18,7 +18,7 @@
                 .get('/api/v1/schedules')
                 .then(response => {
                     this.schedules = response.data;
-                    useScheduleStore().fetchingTable = false;
+                    this.fetching = false;
                 });
         }
     }
@@ -26,7 +26,8 @@
 
 <template>
     <div class="w-100 d-flex justify-center">
-        <v-table class="text-h5 w-66">
+        <v-skeleton-loader v-if="fetching" type="table"/>
+        <v-table v-else class="text-h5 w-66">
             <tbody>
             <tr v-for="schedule in schedules">
                 <td>{{ parseDate(schedule.current_date) }} {{ schedule.weekday_name }} {{ schedule.stream_time }}</td>

resources/views/Welcome.vue

@@ -1,24 +1,17 @@
 <template>
     <v-app>
         <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
-            <Preloader v-if="fetching.value" />
+            <Schedule/>
-            <Schedule v-else />
         </v-sheet>
     </v-app>
 </template>
 
 <script>
 import Schedule from "./Schedule.vue";
-import Preloader from "./Preloader/Preloader.vue";
-import {ref} from "vue";
-import {useScheduleStore} from '../stores/Schedule.js';
 
 export default {
     name: "Welcome",
-    components: {Preloader, Schedule},
+    components: {Schedule}
-    data: () => ({
-        fetching: ref(useScheduleStore().fetchingDates || useScheduleStore().fetchingLinks || useScheduleStore().fetchingTable)
-    })
 }
 </script>