UserModule.vue

<template>
  <div>
    <RouterView v-if="moduleIsReady" />
    <b-row v-else align-h="center" class="my-4">
      <b-spinner variant="primary" />
    </b-row>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

// import the store for current module
import useUserStore from "./store";
import useProjectStore from "../project/store";

export default defineComponent({
  setup() {
    const projectStore = useProjectStore();
    const userStore = useUserStore();

    return { projectStore, userStore };
  },

  computed: {
    moduleIsReady(): boolean {
      return (
        this.userStore.user !== null &&
        this.userStore.userProfile.disciplines !== null &&
        this.userStore.userProfile.languages !== null &&
        this.userStore.userProfile.titles !== null &&
        this.userStore.userProfile.organizations !== null
      );
    },
  },

  created() {
    this.initialize();
  },

  methods: {
    async initialize() {
      await Promise.all([
        this.userStore.retrieveDisciplines(),
        this.userStore.retrieveLanguages(),
        this.userStore.retrieveUser(),
        this.userStore.retrieveOrganizations(),
        this.userStore.retrieveTitles(),
        this.userStore.retrieveTokens(),
      ]);
    },
  },
});
</script>

<style></style>