index.vue

<template>
  <div>
    <LoadingMyLoading :loaded="isMounted" />
  </div>
</template>
<script setup lang="ts">
const isMounted = ref(false);

onMounted(() => {
  /* onMountedは「コンポーネントのmount」なため、ページ全体のmountではない。
   * そのため、レイアウトやページ全体のコンポーネントが集約しているファイルなどのonMountedの中でflagを管理し、
   * ローディング演出用のコンポーネントに渡す
  */
  isMounted.value = true;
});
</script>
<style scoped></style>

MyLoading.vue

<template>
  <div ref="myLoadingElement" :class="['my-loading', { '-mounted': props.loaded }]" :aria-busy="!props.loaded"></div>
</template>

<script lang="ts" setup>
const props = defineProps<{ loaded: boolean }>();

const myLoadingElement = ref<HTMLElement | null>(null);

const removeElement = (event: AnimationEvent) => {
  if (event.animationName.includes("loading-animation")) {
    myLoadingElement.value?.remove();
  }
};

onMounted(() => {
  watch(
    () => props.loaded,
    (newValue) => {
      if (newValue) {
        myLoadingElement.value?.addEventListener("animationend", removeElement);
      }
    }
  );
});

onBeforeUnmount(() => {
  myLoadingElement.value?.removeEventListener("animationend", removeElement);
});
</script>

<style scoped>
.my-loading {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.my-loading.-mounted {
  animation: loading-animation 1s forwards;
}

@keyframes loading-animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>