How to add loading screen in Laravel, Vue w/ Inertia

This would be easy if inertia is not involved but it is.

By the time the loading screen shows, the resources also has loaded so the loading screen only shows for a second.

//Loading.vue

<script setup>
	defineProps({ hasLoaded });
</script>
<template>
	<div v-show="hasLoaded">
		<img src="loading.svg"  />
		Loading...
	</div>
</template>

//Main.vue
<script setup>
	import { ref, onMounted } from "vue";
	import Loading from "./components/Loading";
	import Navigational from "./components/Navigational";

	const hasLoaded = ref(true);

	onMounted(() => {
		hasLoaded = !hasLoaded;
	})
</script>
<template>
	<Loading :hasLoaded="hasLoaded" />
	<Navigational />
	<slot></slot>
</template>