How can I properly setup a Loading screen in Vue3 and Vite?

I want to setup a Loading screen on App loading. I am currently using a Loading component and setting up its time interval to 2 seconds. However, that is not the proper way to set up a Loading screen. What is the best way to handle the loading state for the entire app?

I have directly used the Loading component in the router-view of the App.vue, so I do not have to use the Loading component in each and every component of the App.

The following is my App.vue

<template>
  <v-app class="container">
    <v-app-bar color="green" class="app-bar">
      <v-toolbar-title class="ml-0 pl-4">
        <span class="hidden-sm-and-down">{{ appName }}</span>
      </v-toolbar-title>
      <v-btn rounded depressed dark large @click="gotoHome()">
        <h3>Dashboard</h3>
        <v-icon class="px-2">mdi-ballot</v-icon>
      </v-btn>
      <v-btn rounded depressed dark large @click="dialog = !dialog">
        <h3>Markets</h3>
        <v-icon class="px-2">mdi-apps</v-icon>
      </v-btn>
      <v-btn rounded depressed dark large @click="gotoSettings()">
        <h3>Settings</h3>
        <v-icon class="px-2">settings</v-icon>
      </v-btn>
      <v-btn rounded depressed dark large @click="gotoVerus()">
        <h3>Verus</h3>
        <v-icon class="px-2">mdi-apps</v-icon>
      </v-btn>
    </v-app-bar>
    <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
      <v-card>
        <v-toolbar>
          <v-btn dark @click="dialog = false">
            <v-icon>mdi-close</v-icon>
          </v-btn>
          <v-toolbar-title>Markets</v-toolbar-title>
          <div class="flex-grow-1"></div>
          <v-toolbar-items>
            <v-btn dark text @click="dialog = false">back</v-btn>
          </v-toolbar-items>
        </v-toolbar>
        <v-list three-line subheader>
          <v-subheader>Go to markets</v-subheader>
          <v-list-item>
            <v-list-item-content>
              <v-list-item-title>Informational Section</v-list-item-title>
              <v-list-item-subtitle>Please wait for the available market links to load</v-list-item-subtitle>
              <AppMarkets v-on:gotoMarket="gotoMarket" :key="componentKey" />
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-card>
    </v-dialog>
    <v-navigation-drawer
        v-model="drawer"
        location="left"
        temporary
      >
        <v-list
          :items="items"
        ></v-list>
      </v-navigation-drawer>
      <Loading v-if="loading"></Loading>
      <router-view v-else>
      </router-view>
  </v-app>
</template>


<script>
import AppMarkets from './views/AppMarkets.vue'
import {ref, onMounted} from 'vue'
import Loading from './Loading.vue'


export default {
  name: 'App',
  components: {
    AppMarkets,
    Loading
},
  props: {
    source: String
  },
  setup() {
    const loading = ref(true);
    onMounted(() => {
      // For demonstration purposes, setting loading to true for 2 seconds.
      setTimeout(() => {
        loading.value = false;
      }, 2000);
  });
    return {
      loading,
    };
  },

  methods: {
    gotoHome() {
      this.$router.push('/')
    },
    gotoSettings() {
      this.$router.push('/settings')
    },
    gotoVerus() {
      this.$router.push('/verus')
    },
    gotoMarket: function(base, rel) {
      console.log("Going to new market..." + base + "/")// + rel)
      console.log(this.componentKey)
      this.componentKey += 1
      this.dialog = !this.dialog
      window.location.href='/traderview/'+base+'/'+rel;
    },
    doAction: function(command) {
      window.location.href = "/" + command.toLowerCase().replace(/ /g, "");
    }
  },
  data: () => ({
    appName: 'OrderBook Live',
    base: '',  
    componentKey: ref(0),
    dialog: ref(false),
    drawer: ref(false),
  }),
  
  
}
</script>