New-site/resources/views/Welcome.vue

<template>
    <v-app>
        <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
            <Preloader v-if="fetching.value" />
            <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},
    data: () => ({
        fetching: ref(useScheduleStore().fetchingDates || useScheduleStore().fetchingLinks || useScheduleStore().fetchingTable)
    })
}
</script>

<style scoped>

.bg-gradient {
    background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

</style>