feat(perf): create app-loading component + refactor view resolvers

src/AppLayout.vue

@@ -14,10 +14,10 @@
 </template>
 
 <script>
-import { contexts, useLoadingContext } from "@/composables/loading";
+import { contexts, useLoadingContext } from "@/composables/loading.js";
 // Components
-import AppHeader from "@/components/specific/app/app-header/AppHeader";
-import NotificationCard from "@/components/generic/notification-card/NotificationCard";
+import AppHeader from "@/components/specific/app/app-header/AppHeader.vue";
+import NotificationCard from "@/components/generic/notification-card/NotificationCard.vue";
 
 export default {
   components: {

src/components/generic/app-loading/AppLoader.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="app-loader">
+    <BIMDataSpinner />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-loader {
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .bimdata-spinner {
+    transform: scale(2);
+  }
+}
+</style>

src/components/generic/app-loading/AppLoading.vue

@@ -0,0 +1,34 @@
+<template>
+  <transition name="fade" mode="out-in">
+    <template v-if="loading">
+      <AppLoader />
+    </template>
+    <template v-else>
+      <slot></slot>
+    </template>
+  </transition>
+</template>
+
+<script>
+import { useAppLoading } from "./app-loading.js";
+import AppLoader from "./AppLoader.vue";
+
+export default {
+  components: {
+    AppLoader
+  },
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const loading = useAppLoading(props.name);
+
+    return {
+      loading
+    };
+  }
+};
+</script>

src/components/generic/app-loading/app-loading.js

@@ -0,0 +1,14 @@
+import { ref } from "vue";
+
+const state = {};
+
+export function useAppLoading(name) {
+  return state[name] ?? (state[name] = ref(false));
+}
+
+export async function load(name, promises) {
+  const loading = useAppLoading(name);
+  loading.value = true;
+  await Promise.all(promises);
+  loading.value = false;
+}

src/components/generic/app-slot/AppSlot.vue

@@ -1,6 +1,6 @@
 <script>
 import { h } from "vue";
-import { useAppSlot } from "./app-slot";
+import { useAppSlot } from "./app-slot.js";
 
 export default {
   props: {

src/components/generic/app-slot/AppSlotContent.vue

@@ -1,6 +1,6 @@
 <script>
 import { onActivated, onBeforeUnmount, onDeactivated, onMounted } from "vue";
-import { useAppSlot } from "./app-slot";
+import { useAppSlot } from "./app-slot.js";
 
 export default {
   props: {

src/components/specific/app/app-breadcrumb/breadcrumb-group-selector/BreadcrumbGroupSelector.vue

@@ -14,10 +14,10 @@
 <script>
 import { useRouter } from "vue-router";
 import routeNames from "@/router/route-names.js";
-import { useGroups } from "@/state/groups";
-import { useProjects } from "@/state/projects";
+import { useGroups } from "@/state/groups.js";
+import { useProjects } from "@/state/projects.js";
 // Components
-import BreadcrumbSelector from "@/components/generic/breadcrumb-selector/BreadcrumbSelector";
+import BreadcrumbSelector from "@/components/generic/breadcrumb-selector/BreadcrumbSelector.vue";
 
 export default {
   components: {
@@ -51,8 +51,8 @@ export default {
 
     return {
       // References
-      selectedGroup: currentGroup,
       groups: projectGroups,
+      selectedGroup: currentGroup,
       // Methods
       goToGroupBoard,
       goToProjectGroups

src/components/specific/app/app-breadcrumb/breadcrumb-project-selector/BreadcrumbProjectSelector.vue

@@ -2,7 +2,7 @@
   <BreadcrumbSelector
     :list="spaces"
     labelProp="name"
-    :header="selectedSpace.name"
+    :header="selectedSpace?.name"
     @item-selected="selectSpace"
     @header-clicked="goToSpace"
   />
@@ -11,7 +11,7 @@
     v-if="projects.length > 0"
     :list="projects"
     labelProp="name"
-    :header="selectedProject.name"
+    :header="selectedProject?.name"
     @item-selected="goToProject"
   />
   <div v-else>
@@ -23,10 +23,10 @@
 import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import routeNames from "@/router/route-names.js";
-import { useProjects } from "@/state/projects";
-import { useSpaces } from "@/state/spaces";
+import { useProjects } from "@/state/projects.js";
+import { useSpaces } from "@/state/spaces.js";
 // Components
-import BreadcrumbSelector from "@/components/generic/breadcrumb-selector/BreadcrumbSelector";
+import BreadcrumbSelector from "@/components/generic/breadcrumb-selector/BreadcrumbSelector.vue";
 
 export default {
   components: {
@@ -37,13 +37,24 @@ export default {
     const { userSpaces, currentSpace } = useSpaces();
     const { userProjects, spaceProjects, currentProject } = useProjects();
 
-    const projects = ref(spaceProjects.value);
-    const selectedSpace = ref(currentSpace.value);
-    const selectedProject = ref(currentProject.value);
+    const projects = ref([]);
+    const selectedSpace = ref(null);
+    const selectedProject = ref(null);
 
+    watch(
+      () => spaceProjects.value,
+      () => (projects.value = spaceProjects.value),
+      { immediate: true }
+    );
+    watch(
+      () => currentSpace.value,
+      space => (selectedSpace.value = space),
+      { immediate: true }
+    );
     watch(
       () => currentProject.value,
-      () => (selectedProject.value = currentProject.value)
+      project => (selectedProject.value = project),
+      { immediate: true }
     );
 
     const goToProject = project => {

src/components/specific/app/app-breadcrumb/breadcrumb-space-selector/BreadcrumbSpaceSelector.vue

@@ -10,9 +10,9 @@
 <script>
 import { useRouter } from "vue-router";
 import routeNames from "@/router/route-names.js";
-import { useSpaces } from "@/state/spaces";
+import { useSpaces } from "@/state/spaces.js";
 // Components
-import BreadcrumbSelector from "@/components/generic/breadcrumb-selector/BreadcrumbSelector";
+import BreadcrumbSelector from "@/components/generic/breadcrumb-selector/BreadcrumbSelector.vue";
 
 export default {
   components: {

src/composables/loading.js

@@ -5,26 +5,10 @@ const contexts = Object.freeze({
   viewContainer: "view-container"
 });
 
-const state = {
-  [contexts.viewContainer]: { loading: ref(false) }
-};
-
-const createLoadingContext = context => {
-  state[context] = { loading: ref(false) };
-  return state[context].loading;
-};
+const state = {};
 
-const removeLoadingContext = context => {
-  delete state[context];
+const useLoadingContext = name => {
+  return state[name] ?? (state[name] = ref(false));
 };
 
-const useLoadingContext = context => {
-  return state[context].loading;
-};
-
-export {
-  contexts,
-  createLoadingContext,
-  removeLoadingContext,
-  useLoadingContext
-};
+export { contexts, useLoadingContext };

src/router/guards/auth.js

@@ -4,10 +4,12 @@ const { isAuthenticated, authenticate } = useAuth();
 
 export default async function authGuard(route) {
   if (isAuthenticated.value) {
+    // Continue navigation if already authenticated
     return true;
   } else if (route.matched.some(r => r.meta.requiresAuth)) {
+    // Trigger authentication process if required
     await authenticate(route.path);
-    // Navigate to target route if authentication succeeds (cancel navigation otherwise)
+    // Continue navigation if authentication succeeds (cancel navigation otherwise)
     return isAuthenticated.value;
   }
 }

src/router/guards/data.js

@@ -17,15 +17,21 @@ let dataLoaded = false;
 
 export default async function dataGuard() {
   if (isAuthenticated.value && !dataLoaded) {
-    // Note: the order in which methods are called is important !
+    // **NOTE** the order in which methods are called is important !
 
+    // 1) Load current user data
     await loadUser();
-    await loadUserOrganizations();
-    await loadUserSpaces();
-    await loadUserProjects();
 
-    await loadAllOrganizationsSpaces();
-    await loadAllSpacesSubscriptions();
+    // 2) Load organizations, spaces and projects for the current user
+    await Promise.all([
+      loadUserOrganizations(),
+      loadUserSpaces(),
+      loadUserProjects()
+    ]);
+
+    // 3) Load lists of orga spaces and space subs
+    await loadAllOrganizationsSpaces(); // 3.1) load orga spaces
+    await loadAllSpacesSubscriptions(); // 3.2) load space subs
 
     dataLoaded = true;
   }

src/router/resolvers/views/group-board.js

@@ -8,11 +8,12 @@ const groups = useGroups();
 
 export default async function groupBoardResolver(route) {
   spaces.setCurrentSpace(+route.params.spaceID);
-  await projects.loadSpaceProjects(spaces.currentSpace.value);
+  const project = projects.setCurrentProject(+route.params.projectID);
 
-  projects.setCurrentProject(+route.params.projectID);
-  await projects.loadProjectUsers(projects.currentProject.value);
-  await groups.loadProjectGroups(projects.currentProject.value);
+  await Promise.all([
+    projects.loadProjectUsers(project),
+    groups.loadProjectGroups(project)
+  ]);
 
   groups.setCurrentGroup(+route.params.groupID);
 }

src/router/resolvers/views/model-viewer.js

@@ -7,9 +7,11 @@ const projects = useProjects();
 const models = useModels();
 
 export default async function modelViewerResolver(route) {
-  spaces.setCurrentSpace(+route.params.spaceID);
-  await projects.loadSpaceProjects(spaces.currentSpace.value);
+  const space = spaces.setCurrentSpace(+route.params.spaceID);
+  const project = projects.setCurrentProject(+route.params.projectID);
 
-  projects.setCurrentProject(+route.params.projectID);
-  await models.loadProjectModels(projects.currentProject.value);
+  await Promise.all([
+    projects.loadSpaceProjects(space),
+    models.loadProjectModels(project)
+  ]);
 }

src/router/resolvers/views/project-board.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+import { load } from "@/components/generic/app-loading/app-loading.js";
 import { useGroups } from "@/state/groups.js";
 import { useModels } from "@/state/models.js";
 import { useProjects } from "@/state/projects.js";
@@ -10,16 +12,22 @@ const models = useModels();
 const files = useFiles();
 const groups = useGroups();
 
-export default async function projectBoardResolver(route) {
-  spaces.setCurrentSpace(+route.params.spaceID);
-  await spaces.loadSpaceInfo(spaces.currentSpace.value);
-  await projects.loadSpaceProjects(spaces.currentSpace.value);
+export default function projectBoardResolver(route) {
+  const space = spaces.setCurrentSpace(+route.params.spaceID);
+  const project = projects.setCurrentProject(+route.params.projectID);
 
-  projects.setCurrentProject(+route.params.projectID);
-  await models.loadProjectModels(projects.currentProject.value);
-  await files.loadProjectFileStructure(projects.currentProject.value);
-  await groups.loadProjectGroups(projects.currentProject.value);
+  spaces.loadSpaceInfo(space);
+  projects.loadSpaceProjects(space);
 
-  await projects.loadProjectUsers(projects.currentProject.value);
-  await projects.loadProjectInvitations(projects.currentProject.value);
+  load("project-users", [
+    projects.loadProjectUsers(project),
+    projects.loadProjectInvitations(project)
+  ]);
+  load("project-models", [
+    models.loadProjectModels(project)
+  ]);
+  load("project-files", [
+    files.loadProjectFileStructure(project),
+    groups.loadProjectGroups(project)
+  ]);
 }

src/router/resolvers/views/project-groups.js

@@ -8,8 +8,7 @@ const groups = useGroups();
 
 export default async function projectBoardResolver(route) {
   spaces.setCurrentSpace(+route.params.spaceID);
-  await projects.loadSpaceProjects(spaces.currentSpace.value);
+  const project = projects.setCurrentProject(+route.params.projectID);
 
-  projects.setCurrentProject(+route.params.projectID);
-  await groups.loadProjectGroups(projects.currentProject.value);
+  await groups.loadProjectGroups(project);
 }

src/router/resolvers/views/space-board.js

@@ -1,14 +1,21 @@
+/* eslint-disable */
+import { load } from "@/components/generic/app-loading/app-loading.js";
 import { useProjects } from "@/state/projects.js";
 import { useSpaces } from "@/state/spaces.js";
 
 const spaces = useSpaces();
 const projects = useProjects();
 
 export default async function spaceBoardResolver(route) {
-  spaces.setCurrentSpace(+route.params.spaceID);
+  const space = spaces.setCurrentSpace(+route.params.spaceID);
 
-  await projects.loadSpaceProjects(spaces.currentSpace.value);
-  await spaces.loadSpaceInfo(spaces.currentSpace.value);
-  await spaces.loadSpaceUsers(spaces.currentSpace.value);
-  await spaces.loadSpaceInvitations(spaces.currentSpace.value);
+  spaces.loadSpaceInfo(space);
+
+  load("space-users", [
+    spaces.loadSpaceUsers(space),
+    spaces.loadSpaceInvitations(space)
+  ]);
+  load("space-projects", [
+    projects.loadSpaceProjects(space)
+  ]);
 }

src/views/project-board/project-files/ProjectFiles.scss

@@ -6,6 +6,12 @@
       width: 100%;
       min-height: 560px;
       max-height: 100%;
+      background-color: var(--color-white);
     }
   }
+
+  .files-manager {
+    width: 100%;
+    height: 100%;
+  }
 }