Add delay between Vue router-view transitions - vuejs3

Question

I'm trying to do some delay between route changes.
For example user clicks on router-link and after previous View faded out I want to show some kind of Priomise based loading animation before next View's fade in.
Here's my code:
<nav>
<router-link to="/">Home</router-link>
|
<router-link to="/about">About</router-link>
</nav>
<router-view v-slot="{ Component }">
<transition
mode="out-in"
name="custom-classes"
enter-active-class="fade-enter-active"
leave-active-class="fade-leave-active"
enter-from-class="fade-enter-from"
leave-to-class="fade-leave-to"
>
<component :is="Component" :key="$route.path"/>
</transition>
</router-view>
<style lang="less">
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
I've tried some custom classes but don't know how to stop between transitions.

Answer 1

In case someone's looking for same problem I've ended up with the following code.
<nav>
<router-link to="/">Home</router-link>
|
<router-link to="/about">About</router-link>
</nav>
<router-view v-slot="{ Component }">
<transition
mode="out-in"
name="custom-classes"
enter-active-class="fade-enter-active"
leave-active-class="fade-leave-active"
enter-from-class="fade-enter-from"
leave-to-class="fade-leave-to"
>
<component :is="Component" :key="$route.path" v-if="component_visible"/>
</transition>
</router-view>
I've added v-if for the <component/> based on computed property
computed: {
component_visible() {
return this.$store.state.common.transition;
}
}
And then just change it's value in any place that needed.