Showing spinner before child component renders [closed]

enter image description here

I have a sidebar with links and in my App.vue i have a <component> element which dynamically renders component for each link when it is clicked. I also have a few components, which are rendered for about 2 sec. I had a plan that when a child component starts to render, in it's LC hook beforeCreate() I emit an event that sets the v-if condition on loader in App.vue to true and shows the loader. And in mount() LC hook i emit another event that sets v-if property to false and spinner is not displayed and rendered component is displayed. Well it's not working that way :D. I tried with v-cloak also, no luck. It seems that everything stops for that component to render and my emits from child component don't change state for boolean property for v-if in spinner in App.vue.

Can anyone propose a solution for this situation?
Some way that can first show the spinner and then render a child component?
Tnx!

here is an example: child component

<template>
  <div class="hello">
    <ul>
      <li v-for="n in 50000" :key="n">{{n}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  beforeCreate() {
    this.$emit("show-it");
    console.log("Show It");
  },
  mounted() {
    this.$emit("hide-it");
    console.log("Hide It");
  }
};
</script>

App.vue

<template>
  <div id="app">
    <PulseLoader v-if="showIt"></PulseLoader>
    <HelloWorld @show-it="showIt = true" @hide-it="showIt = false" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import PulseLoader from "vue-spinner/src/PulseLoader";

export default {
  name: "app",
  components: {
    HelloWorld,
    PulseLoader
  },
  data() {
    return {
      showIt: false
    };
  }
};
</script>