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

package-lock.json

@@ -7,6 +7,7 @@
             "dependencies": {
                 "@mdi/font": "^7.4.47",
                 "axios": "^1.6.4",
+                "pinia": "^2.1.7",
                 "typescript": "^5.3.3",
                 "vue": "^3.4.14",
                 "vuetify": "^3.4.10"
@@ -605,6 +606,11 @@
                 "@vue/shared": "3.4.14"
             }
         },
+        "node_modules/@vue/devtools-api": {
+            "version": "6.6.1",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+            "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
+        },
         "node_modules/@vue/reactivity": {
             "version": "3.4.14",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.14.tgz",
@@ -906,6 +912,56 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
+        "node_modules/pinia": {
+            "version": "2.1.7",
+            "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+            "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+            "dependencies": {
+                "@vue/devtools-api": "^6.5.0",
+                "vue-demi": ">=0.14.5"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.4.0",
+                "typescript": ">=4.4.4",
+                "vue": "^2.6.14 || ^3.3.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                },
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/pinia/node_modules/vue-demi": {
+            "version": "0.14.7",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+            "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/postcss": {
             "version": "8.4.33",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",

package.json

@@ -15,6 +15,7 @@
     "dependencies": {
         "@mdi/font": "^7.4.47",
         "axios": "^1.6.4",
+        "pinia": "^2.1.7",
         "typescript": "^5.3.3",
         "vue": "^3.4.14",
         "vuetify": "^3.4.10"

resources/stores/Schedule.js

@@ -0,0 +1,15 @@
+import {defineStore} from "pinia";
+
+export const useScheduleStore = defineStore('Schedule', {
+    state: () => ({
+        fetchingDates: true,
+        fetchingTable: true,
+        fetchingLinks: true
+    }),
+    getters: {
+
+    },
+    actions: {
+
+    },
+})

resources/views/Schedule.vue

@@ -1,12 +1,11 @@
 <template>
-    <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
-        <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>
-            <ScheduleTable/>
-            <p class="text-h3 ma-5">Ссылочки</p>
-            <Links/>
-        </v-sheet>
+    <v-sheet class="mt-5 mb-5 rounded-lg w-75">
+        <p class="text-h3 ma-5">Расписание стримов</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/>
     </v-sheet>
 </template>
 
@@ -19,31 +18,31 @@ export default {
     name: "Schedule",
     components: {Links, ScheduleTable},
     data: () => ({
-        dates: []
+        dates: [],
+        fetching: true
     }),
     methods: {
         parseDate(date){
             let dateArr = date.split("-");
             return dateArr[2] + "." + dateArr[1];
+        },
+        async getDates(){
+            await axios
+                .get('/api/v1/dates')
+                .then(response => {
+                    this.dates = response.data;
+                    this.fetching = false;
+                });
         }
     },
     mounted() {
-        axios
-            .get('/api/v1/dates')
-            .then(response => (this.dates = response.data));
+        this.getDates();
     }
 }
 </script>
 
 <style scoped>
 
-.bg-gradient {
-    background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
-    background-size: 200% 200%;
-    animation: gradient 15s ease infinite;
-    height: 100vh;
-}
-
 @keyframes gradient {
     0% {
         background-position: 0 50%;

resources/views/Schedule/Links.vue

@@ -1,14 +1,19 @@
 <script>
     import axios from "axios";
+
     export default {
         name: "Links",
         data: () => ({
-            links: []
+            links: [],
+            fetching: true
         }),
         mounted() {
             axios
                 .get('/api/v1/links')
-                .then(response => (this.links = response.data));
+                .then(response => {
+                    this.links = response.data;
+                    this.fetching = false;
+                });
         }
     }
 </script>
@@ -16,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,9 +1,11 @@
 <script>
     import axios from "axios";
+
     export default {
         name: "ScheduleTable",
         data: () => ({
-            schedules: []
+            schedules: [],
+            fetching: true
         }),
         methods: {
             parseDate(date){
@@ -14,14 +16,18 @@
         mounted() {
             axios
                 .get('/api/v1/schedules')
-                .then(response => (this.schedules = response.data));
+                .then(response => {
+                    this.schedules = response.data;
+                    this.fetching = false;
+                });
         }
     }
 </script>
 
 <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,11 +1,13 @@
 <template>
     <v-app>
-        <Schedule></Schedule>
+        <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
+            <Schedule/>
+        </v-sheet>
     </v-app>
 </template>
 
 <script>
-import Schedule from "./Schedule.vue"
+import Schedule from "./Schedule.vue";
 
 export default {
     name: "Welcome",
@@ -15,4 +17,11 @@ export default {
 
 <style scoped>
 
+.bg-gradient {
+    background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
+    background-size: 200% 200%;
+    animation: gradient 15s ease infinite;
+    height: 100vh;
+}
+
 </style>

resources/welcome.js

@@ -1,5 +1,6 @@
 import './js/bootstrap';
-import {createApp} from 'vue'
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './views/Welcome.vue'
 import { createVuetify } from 'vuetify'
 import 'vuetify/styles'
@@ -7,9 +8,11 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import '@mdi/font/css/materialdesignicons.css'
 
+const pinia = createPinia();
+
 const vuetify = createVuetify({
     components,
     directives
-})
+});
 
-createApp(App).use(vuetify).mount("#app")
+createApp(App).use(vuetify).use(pinia).mount("#app");