PATCH: Fix: perf space board

src/components/specific/projects/project-card/ProjectCard.vue

@@ -152,7 +152,7 @@ onMounted(() => {
           () => props.project,
           async () => {
             loading.value = true;
-            const models = await ModelService.fetchModels(props.project);
+            const models = await ModelService.fetchModels(props.project, { cache: true });
             displayedModels.value = models.reduce(
               (acc, model) => {
                 if (

src/components/specific/spaces/space-card/SpaceCard.vue

@@ -25,7 +25,7 @@
             {{ $t("SpaceCard.projects") }}
           </div>
           <div class="space-card__sub-title__number">
-            {{ nbProjects }}
+            {{ projectsCount[space.id] }}
           </div>
         </div>
       </template>
@@ -34,7 +34,6 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
 import routeNames from "../../../../router/route-names.js";
 import { useProjects } from "../../../../state/projects.js";
 import { useSpaces } from "../../../../state/spaces.js";
@@ -58,11 +57,7 @@ const props = defineProps({
 
 const { isFavoriteSpace } = useUser();
 const { isFreeSpace } = useSpaces();
-const { projectsBySpace } = useProjects();
-
-const nbProjects = computed(
-  () => projectsBySpace.value[props.space.id]?.length ?? 0
-);
+const { projectsCount } = useProjects();
 </script>
 
 <style scoped src="./SpaceCard.css"></style>

src/components/specific/users/user-favorites-manager/favorite-space-card/FavoriteSpaceCard.vue

@@ -17,7 +17,7 @@
         <BIMDataTextbox maxWidth="260px" :text="space.name" />
       </div>
       <div class="card__info__data">
-        {{ nbProjects + " " + $t("t.projects") }}
+        {{ projectsCount[space.id] + " " + $t("t.projects") }}
       </div>
     </AppLink>
     <BIMDataButton ghost rounded icon @click.stop="removeFavoriteSpace(space)">
@@ -27,7 +27,6 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
 import routeNames from "../../../../../router/route-names.js";
 import { useProjects } from "../../../../../state/projects.js";
 import { useUser } from "../../../../../state/user.js";
@@ -43,11 +42,7 @@ const props = defineProps({
 });
 
 const { removeFavoriteSpace } = useUser();
-const { projectsBySpace } = useProjects();
-
-const nbProjects = computed(
-  () => projectsBySpace.value[props.space.id]?.length ?? 0
-);
+const { projectsCount } = useProjects();
 </script>
 
 <style scoped>

src/composables/session.js

@@ -7,6 +7,7 @@ const STORAGE_KEYS = Object.freeze({
   PROJECT_MODEL_TAB: `${KEY_PREFIX}:project-model-tab`,
   GED_FILES_TAB: `${KEY_PREFIX}:ged-files-tab`,
   GED_TARGET_FOLDER: `${KEY_PREFIX}:ged-target-folder`,
+  SPACE_BOARD_SCROLL: `${KEY_PREFIX}:space-board-scroll`,
 });
 
 const getEntry = (key) => JSON.parse(sessionStorage.getItem(key));
@@ -70,6 +71,18 @@ const gedTargetFolder = {
   },
 };
 
+const spaceBoardScroll = {
+  get(spaceId) {
+    return getEntry(`${STORAGE_KEYS.SPACE_BOARD_SCROLL}:${spaceId}`);
+  },
+  set(spaceId, value) {
+    setEntry(`${STORAGE_KEYS.SPACE_BOARD_SCROLL}:${spaceId}`, value);
+  },
+  clear(spaceId) {
+    sessionStorage.removeItem(`${STORAGE_KEYS.SPACE_BOARD_SCROLL}:${spaceId}`);
+  },
+};
+
 export function useSession() {
   return {
     currentView,
@@ -78,5 +91,6 @@ export function useSession() {
     gedFilesTab,
     gedTargetFolder,
     projectModelTab,
+    spaceBoardScroll,
   };
 }

src/router/guards/views/subscribe.js

@@ -1,19 +1,10 @@
-import { useSession } from "../../../composables/session.js";
 import routeNames from "../../../router/route-names.js";
 import { useSpaces } from "../../../state/spaces.js";
 
-const { previousView } = useSession();
 const { freeSpaces } = useSpaces();
 
 export default async function subscribeGuard() {
-  // If this is the landing view (i.e. there is no previous route)
-  // then continue navigation and skip free space check.
-  // if (!previousView.get()?.name) {
-  //   return true;
-  // }
-
-  // Redirect to pro plan subscription
-  // if the user already has a free space
+  // Redirect to pro plan subscription if the user already has a free space
   if (freeSpaces.value.length > 0) {
     return { name: routeNames.subscriptionPro };
   }

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

@@ -17,14 +17,14 @@ export default function projectBoardResolver(route) {
   const project = projects.setCurrentProject(+route.params.projectID);
 
   spaces.loadSpaceSubInfo(space);
-  projects.loadSpaceProjects(space);
+  projects.loadSpaceProjects(space, { cache: true });
 
   load("project-users", [
     projects.loadProjectUsers(project),
     projects.loadProjectInvitations(project)
   ]);
   load("project-models", [
-    models.loadProjectModels(project)
+    models.loadProjectModels(project, { cache: true })
   ]);
   load("project-files", [
     files.loadProjectFileStructure(project),

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

@@ -16,6 +16,6 @@ export default async function spaceBoardResolver(route) {
     spaces.loadSpaceInvitations(space)
   ]);
   load("space-projects", [
-    projects.loadSpaceProjects(space)
+    projects.loadSpaceProjects(space, { cache: true })
   ]);
 }

src/services/ModelService.js

@@ -4,13 +4,23 @@ import { MODEL_TYPE } from "../config/models.js";
 import { ERRORS, RuntimeError, ErrorService } from "./ErrorService.js";
 
 class ModelService {
-  callQueue = queue(async task => {
-    return await task();
-  }, 40);
+  constructor() {
+    this.cache = new Map();
+    this.callQueue = queue(async task => {
+      return await task();
+    }, 40);
+  }
 
-  async fetchModels(project) {
+  async fetchModels(project, { cache } = {}) {
     try {
-      return await this.callQueue.push(() => apiClient.modelApi.getModelsSummary(project.cloud.id, project.id));
+      const key = `project-models-${project.id}`;
+      if (cache && this.cache.has(key)) {
+        return this.cache.get(key);
+      } else {
+        const models = await this.callQueue.push(() => apiClient.modelApi.getModelsSummary(project.cloud.id, project.id));
+        this.cache.set(key, models);
+        return models;
+      }
     } catch (error) {
       ErrorService.handleError(
         new RuntimeError(ERRORS.MODELS_FETCH_ERROR, error)
@@ -101,6 +111,7 @@ class ModelService {
       throw new RuntimeError(ERRORS.MODEL_DELETE_ERROR, error);
     }
   }
+
   fetchModelElements(project, model, params = {}) {
     return apiClient.modelApi.getElements(
       project.cloud.id,

src/services/ProjectService.js

@@ -2,18 +2,36 @@ import { apiClient, backendClient } from "./api-client.js";
 import { ERRORS, RuntimeError, ErrorService } from "./ErrorService.js";
 
 class ProjectService {
-  async fetchUserProjects() {
+  constructor() {
+    this.cache = new Map();
+  }
+
+  async fetchUserProjects({ cache } = {}) {
     try {
-      return await apiClient.collaborationApi.getSelfProjects();
+      const key = "user-projects";
+      if (cache && this.cache.has(key)) {
+        return this.cache.get(key);
+      } else {
+        const projects = await apiClient.collaborationApi.getSelfProjects();
+        this.cache.set(key, projects);
+        return projects;
+      }
     } catch (error) {
       ErrorService.handleError(new RuntimeError(ERRORS.PROJECTS_FETCH_ERROR, error));
       return [];
     }
   }
 
-  async fetchSpaceProjects(space) {
+  async fetchSpaceProjects(space, { cache } = {}) {
     try {
-      return await apiClient.collaborationApi.getProjects(space.id);
+      const key = `space-projects-${space.id}`;
+      if (cache && this.cache.has(key)) {
+        return this.cache.get(key);
+      } else {
+        const projects = await apiClient.collaborationApi.getProjects(space.id);
+        this.cache.set(key, projects);
+        return projects;
+      }
     } catch (error) {
       ErrorService.handleError(new RuntimeError(ERRORS.PROJECTS_FETCH_ERROR, error));
       return [];
@@ -165,9 +183,11 @@ class ProjectService {
     }
     return res;
   }
+
   updateProjectNotification(spaceId, projectId, notification) {
     return backendClient.put(`/cloud/${spaceId}/project/${projectId}/notification`, notification);
   }
+
   deleteProjectNotification(spaceId, projectId) {
     return backendClient.delete(`/cloud/${spaceId}/project/${projectId}/notification`);
   }

src/services/SpaceService.js

@@ -3,9 +3,20 @@ import { IS_NOTIFICATION_ENABLED } from "../config/notification.js";
 import { ERRORS, ErrorService, RuntimeError } from "./ErrorService.js";
 
 class SpaceService {
-  async fetchUserSpaces() {
+  constructor() {
+    this.cache = new Map();
+  }
+
+  async fetchUserSpaces({ cache } = {}) {
     try {
-      return await apiClient.collaborationApi.getClouds();
+      const key = "user-spaces";
+      if (cache && this.cache.has(key)) {
+        return this.cache.get(key);
+      } else {
+        const spaces = await apiClient.collaborationApi.getClouds();
+        this.cache.set(key, spaces);
+        return spaces;
+      }
     } catch (error) {
       ErrorService.handleError(
         new RuntimeError(ERRORS.SPACES_FETCH_ERROR, error)

src/services/SubscriptionService.js

@@ -53,7 +53,7 @@ class SubscriptionService {
       return [];
     }
     try {
-      return await privateApiClient.get(`/payment/free-cloud`);
+      return await privateApiClient.get("/payment/free-cloud");
     } catch (error) {
       ErrorService.handleError(error);
       return [];
@@ -66,7 +66,6 @@ class SubscriptionService {
     }
 
     let subInfo;
-
     try {
       subInfo = await apiClient.collaborationApi.getCloudSize(space.id);
     } catch (error) {

src/state/invitations.js

@@ -32,8 +32,11 @@ const acceptInvitations = async invitations => {
     UserService.acceptInvitation
   );
   await loadUser();
-  await Promise.all([loadUserSpaces(), loadUserProjects()]);
-  await loadUserInvitations();
+  await Promise.all([
+    loadUserSpaces(),
+    loadUserProjects(),
+    loadUserInvitations()
+  ]);
 };
 
 const declineInvitation = async invitation => {

src/state/models.js

@@ -8,8 +8,8 @@ const state = reactive({
   projectModels: []
 });
 
-const loadProjectModels = async project => {
-  const models = await ModelService.fetchModels(project);
+const loadProjectModels = async (project, options) => {
+  const models = await ModelService.fetchModels(project, options);
   const projectModels = [];
   for (const model of models) {
     if (model.id === project.main_model_id) {
@@ -22,18 +22,14 @@ const loadProjectModels = async project => {
   return models;
 };
 
-const fetchModelByID = async (project, id) => {
-  const model = await ModelService.fetchModelByID(project, id);
-  return model;
-};
+const fetchModelByID = (project, id) => ModelService.fetchModelByID(project, id);
 
-const createModel = async (project, file) => {
-  const newModel = await ModelService.createModel(project, file);
-  return newModel;
-};
+const createModel = (project, file) => ModelService.createModel(project, file);
 
 const createPhotosphere = (project, file) => ModelService.createPhotosphere(project, file);
 
+const mergeModels = (project, models, name) => ModelService.mergeModels(project, models, name);
+
 const updateModels = async (project, models) => {
   const newModels = await ModelService.updateModels(project, models);
   await loadProjectModels(project);
@@ -48,10 +44,6 @@ const updateModelName = async (project, model, name) => {
   return { ...model, name };
 };
 
-const mergeModels = async (project, models, name) => {
-  await ModelService.mergeModels(project, models, name);
-};
-
 const deleteModels = async (project, models, options) => {
   await ModelService.deleteModels(project, models, options);