<script setup lang="ts">
import Loading from './Loading.vue'
</script>

<template>
	<RouterView v-slot="{ Component, route }">
		<slot v-if="!Component">
			<div class="w-100p h-100vh flex justify-content-center">
				<Loading />
			</div>
		</slot>
		<transition v-else :duration="300" name="slide-fade" mode="out-in" appear>
			<component :is="Component" :key="route?.params.itemID" />
		</transition>
	</RouterView>
</template>

<style scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
	overflow: hidden;
}
</style>
