perf: defer subproject fetch and eliminate duplicate activity calls on load

- Fix router guard forEach async bug: replace forEach with for...of so
  auth middleware actually awaits before segment lookup runs, eliminating
  the pre-token /segment/{id} request
- Replace resolveProjectGroupForSelection (findSegment call) with flat
  /segment/subproject/query filtered by grandparentSlug; store result in
  selectedProjectGroupSubprojects state
- activity-timeline and lf-banners now read from selectedProjectGroupSubprojects
  instead of walking projectGroup.projects[].subprojects[]
- utils/segments: getSegmentsFromProjectGroup reads subproject IDs from store
- Remove duplicate fetchActivityTypes/fetchActivityChannels from App.vue
  tenant watcher; menu.vue watcher already handles these correctly once a
  project group is selected

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Joana Maia <jmaia@contractor.linuxfoundation.org>

Author: joanagmaia

frontend/src/app.vue

@@ -23,9 +23,7 @@
 <script>
 import { mapActions } from 'vuex';
 import AppResizePage from '@/modules/layout/pages/resize-page.vue';
-import { mapActions as piniaMapActions, storeToRefs } from 'pinia';
-import { useActivityStore } from '@/modules/activity/store/pinia';
-import { useActivityTypeStore } from '@/modules/activity/store/type';
+import { storeToRefs } from 'pinia';
 import { useAuthStore } from '@/modules/auth/store/auth.store';
 import useSessionTracking from '@/shared/modules/monitoring/useSessionTracking';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
@@ -58,8 +56,6 @@ export default {
     tenant: {
       handler(tenant, oldTenant) {
         if (tenant?.id && tenant.id !== oldTenant?.id) {
-          this.fetchActivityTypes();
-          this.fetchActivityChannels();
           this.listProjectGroups({
             limit: 20,
             reset: true,
@@ -91,12 +87,6 @@ export default {
     ...mapActions({
       resize: 'layout/resize',
     }),
-    ...piniaMapActions(useActivityStore, {
-      fetchActivityChannels: 'fetchActivityChannels',
-    }),
-    ...piniaMapActions(useActivityTypeStore, {
-      fetchActivityTypes: 'fetchActivityTypes',
-    }),
 
     handleResize() {
       this.resize({

frontend/src/modules/activity/components/activity-timeline.vue

@@ -257,7 +257,7 @@ const props = defineProps({
 });
 
 const lsSegmentsStore = useLfSegmentsStore();
-const { projectGroups, selectedProjectGroup } = storeToRefs(lsSegmentsStore);
+const { selectedProjectGroup, selectedProjectGroupSubprojects } = storeToRefs(lsSegmentsStore);
 
 const enabledPlatforms: IdentityConfig[] = Object.values(lfIdentities);
 
@@ -274,16 +274,8 @@ const selectedSegment = ref(props.selectedSegment || null);
 
 const isMemberEntity = computed(() => props.entityType === 'member');
 
-const subprojects = computed(() => projectGroups.value.list.reduce((acc, projectGroup) => {
-  (projectGroup.projects || []).forEach((project) => {
-    (project.subprojects || []).forEach((subproject) => {
-      acc[subproject.id] = {
-        id: subproject.id,
-        name: subproject.name,
-      };
-    });
-  });
-
+const subprojects = computed(() => selectedProjectGroupSubprojects.value.reduce((acc, sp) => {
+  acc[sp.id] = { id: sp.id, name: sp.name };
   return acc;
 }, {}));
 

frontend/src/modules/lf/layout/components/lf-banners.vue

@@ -158,11 +158,11 @@ import LfButton from '@/ui-kit/button/Button.vue';
 const ERROR_BANNER_WORKING_DAYS_DISPLAY = 3;
 
 const lsSegmentsStore = useLfSegmentsStore();
-const { selectedProjectGroup } = storeToRefs(lsSegmentsStore);
+const { selectedProjectGroup, selectedProjectGroupSubprojects } = storeToRefs(lsSegmentsStore);
 const integrations = ref([]);
 const fetchIntegrationTimer = ref(null);
 const loading = ref(true);
-const subProjects = ref([]);
+const subProjects = computed(() => selectedProjectGroupSubprojects.value);
 
 const route = useRoute();
 
@@ -252,21 +252,6 @@ watch(selectedProjectGroup, (updatedProjectGroup, previousProjectGroup) => {
     loading.value = true;
     fetchIntegrations(updatedProjectGroup);
   }
-
-  if (!updatedProjectGroup) {
-    subProjects.value = [];
-  } else {
-    subProjects.value = updatedProjectGroup.projects
-      .reduce((acc, project) => {
-        project.subprojects.forEach((subproject) => {
-          if (subproject) {
-            acc.push(subproject);
-          }
-        });
-
-        return acc;
-      }, []);
-  }
 }, {
   deep: true,
   immediate: true,

frontend/src/modules/lf/segments/lf-segments-service.js

@@ -89,6 +89,18 @@ export class LfService {
     return response.data;
   }
 
+  static async querySubprojects(body) {
+    const response = await authAxios.post(
+      '/segment/subproject/query',
+      {
+        ...body,
+        excludeSegments: true,
+      },
+    );
+
+    return response.data;
+  }
+
   // Sub-projects
 
   static async createSubProject(body) {

frontend/src/modules/lf/segments/store/actions.js

@@ -14,31 +14,6 @@ const isAdminOnly = () => {
   return roles.value.includes(LfRole.projectAdmin);
 };
 
-const hasNestedProjects = (projectGroup) => Array.isArray(projectGroup?.projects)
-  && projectGroup.projects.some((p) => Array.isArray(p.subprojects) && p.subprojects.length > 0);
-
-const resolveProjectGroupForSelection = async (projectGroupOrId, list) => {
-  if (!projectGroupOrId) {
-    return null;
-  }
-
-  const id = typeof projectGroupOrId === 'string' ? projectGroupOrId : projectGroupOrId.id;
-  if (!id) {
-    return null;
-  }
-
-  const fromArg = typeof projectGroupOrId === 'object' ? projectGroupOrId : null;
-  const fromList = list.find((p) => p.id === id) || null;
-
-  if (hasNestedProjects(fromArg)) {
-    return fromArg;
-  }
-  if (hasNestedProjects(fromList)) {
-    return fromList;
-  }
-
-  return LfService.findSegment(id);
-};
 
 export default {
   // Project Groups
@@ -296,35 +271,53 @@ export default {
 
     this.listProjects();
   },
+  async fetchSubprojectsForProjectGroup(grandparentSlug) {
+    if (!grandparentSlug) {
+      this.selectedProjectGroupSubprojects = [];
+      return;
+    }
+    try {
+      const response = await LfService.querySubprojects({
+        limit: null,
+        offset: 0,
+        filter: { grandparentSlug },
+      });
+      this.selectedProjectGroupSubprojects = response.rows || [];
+    } catch (e) {
+      this.selectedProjectGroupSubprojects = [];
+    }
+  },
+
   async updateSelectedProjectGroup(projectGroupOrId, sendToDashboard = true) {
     if (!projectGroupOrId) {
       this.selectedProjectGroup = null;
+      this.selectedProjectGroupSubprojects = [];
+      return;
+    }
+
+    const id = typeof projectGroupOrId === 'string' ? projectGroupOrId : projectGroupOrId.id;
+    if (!id) {
+      this.selectedProjectGroup = null;
+      this.selectedProjectGroupSubprojects = [];
       return;
     }
 
     try {
-      const projectGroup = await resolveProjectGroupForSelection(
-        projectGroupOrId,
-        this.projectGroups.list,
-      );
+      let projectGroup = this.projectGroups.list.find((p) => p.id === id) || null;
+      if (!projectGroup) {
+        await this.listProjectGroups({ limit: null, reset: true });
+        projectGroup = this.projectGroups.list.find((p) => p.id === id) || null;
+      }
 
       if (!projectGroup?.id) {
         this.selectedProjectGroup = null;
+        this.selectedProjectGroupSubprojects = [];
         ToastStore.error('Project group could not be loaded');
         return;
       }
 
       this.selectedProjectGroup = projectGroup;
-
-      const idx = this.projectGroups.list.findIndex((p) => p.id === projectGroup.id);
-      if (idx >= 0) {
-        this.projectGroups.list[idx] = {
-          ...this.projectGroups.list[idx],
-          ...projectGroup,
-        };
-      } else {
-        this.projectGroups.list = [...this.projectGroups.list, projectGroup];
-      }
+      this.fetchSubprojectsForProjectGroup(projectGroup.slug);
 
       if (sendToDashboard) {
         router.push({
@@ -333,6 +326,7 @@ export default {
       }
     } catch (e) {
       this.selectedProjectGroup = null;
+      this.selectedProjectGroupSubprojects = [];
       ToastStore.error('Something went wrong while selecting the project group');
     }
   },

frontend/src/modules/lf/segments/store/state.ts

@@ -1,7 +1,8 @@
-import { ProjectGroup, Project } from '@/modules/lf/segments/types/Segments';
+import { ProjectGroup, Project, SubProject } from '@/modules/lf/segments/types/Segments';
 
 export interface SegmentsState {
   selectedProjectGroup: ProjectGroup | null
+  selectedProjectGroupSubprojects: SubProject[]
   adminProjectGroups: {
     list: ProjectGroup[]
   }
@@ -32,6 +33,7 @@ export interface SegmentsState {
 
 const state: SegmentsState = {
   selectedProjectGroup: null,
+  selectedProjectGroupSubprojects: [],
   adminProjectGroups: {
     list: [],
   },

frontend/src/modules/lf/segments/types/Segments.ts

@@ -50,7 +50,8 @@ export interface ProjectGroup {
   activityChannels: object;
   createdAt: string;
   updatedAt: string;
-  projects: Project[];
+  projects?: Project[];
+  projectCount?: number;
   isLF: boolean;
 }
 

frontend/src/router/index.js

@@ -85,9 +85,10 @@ export const createRouter = () => {
           store,
         };
 
-        await middlewareArray.forEach(async (middleware) => {
+        for (const middleware of middlewareArray) {
+          // eslint-disable-next-line no-await-in-loop
           await middleware(context);
-        });
+        }
 
         // Redirect to project group landing pages if routes that require a selected project group
         // And no project group is selected

frontend/src/utils/segments.js

@@ -19,17 +19,14 @@ export const getSegmentsFromProjectGroup = (
     return [projectGroup.id];
   }
 
-  if (!projectGroup.projects?.length) {
+  const lsSegmentsStore = useLfSegmentsStore();
+  const { selectedProjectGroupSubprojects } = storeToRefs(lsSegmentsStore);
+
+  if (!selectedProjectGroupSubprojects.value.length) {
     return [projectGroup.id];
   }
 
-  return projectGroup.projects.reduce((acc, project) => {
-    (project.subprojects || []).forEach((subproject) => {
-      acc.push(subproject.id);
-    });
-
-    return acc;
-  }, []);
+  return selectedProjectGroupSubprojects.value.map((sp) => sp.id);
 };
 
 export const getProjectGroupsThroughSegments = (segments) => {