chore(fe2): project page load speed optimization (#1974)

* merging queries for faster load

* preload plugin

* latest threads/models query optimization

packages/frontend-2/components/header/NavUserMenu.vue

@@ -142,19 +142,18 @@ import {
   CloudArrowDownIcon,
   ChatBubbleLeftRightIcon
 } from '@heroicons/vue/24/outline'
-import { useQuery } from '@vue/apollo-composable'
 import { Roles } from '@speckle/shared'
 import type { Optional } from '@speckle/shared'
 import { useActiveUser } from '~~/lib/auth/composables/activeUser'
 import { useAuthManager } from '~~/lib/auth/composables/auth'
 import { loginRoute } from '~~/lib/common/helpers/route'
 import { useTheme, AppTheme } from '~~/lib/core/composables/theme'
-import { serverVersionInfoQuery } from '~~/lib/core/graphql/queries'
+import { useServerInfo } from '~/lib/core/composables/server'
 
 const { logout } = useAuthManager()
 const { activeUser, isGuest } = useActiveUser()
 const { isDarkTheme, setTheme } = useTheme()
-const { result } = useQuery(serverVersionInfoQuery)
+const { serverInfo } = useServerInfo()
 const route = useRoute()
 const router = useRouter()
 
@@ -163,7 +162,7 @@ const showProfileEditDialog = ref(false)
 const token = computed(() => route.query.token as Optional<string>)
 
 const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon))
-const version = computed(() => result.value?.serverInfo.version)
+const version = computed(() => serverInfo.value?.version)
 
 const isAdmin = computed(() => activeUser.value?.role === Roles.Server.Admin)
 

packages/frontend-2/components/project/models-page/Results.vue

@@ -5,6 +5,7 @@
         v-if="gridOrList === GridListToggleValue.List"
         :search="finalSearch"
         :project="project"
+        :project-id="project.id"
         :source-apps="sourceApps"
         :contributors="contributors"
         @update:loading="finalLoading = $event"
@@ -14,6 +15,7 @@
         v-if="gridOrList === GridListToggleValue.Grid"
         :search="finalSearch"
         :project="project"
+        :project-id="project.id"
         :source-apps="sourceApps"
         :contributors="contributors"
         @update:loading="finalLoading = $event"

packages/frontend-2/components/project/page/latest-items/Comments.vue

@@ -1,8 +1,8 @@
 <template>
   <ProjectPageLatestItems
-    :count="project.commentThreadCount.totalCount"
+    :count="project?.commentThreadCount.totalCount || 0"
     :hide-filters="showCommentsIntro"
-    :see-all-url="projectDiscussionsRoute(project.id)"
+    :see-all-url="projectDiscussionsRoute(projectId)"
     title="Discussions"
   >
     <template #default="{ gridOrList }">
@@ -31,6 +31,7 @@ import { GridListToggleValue } from '~~/lib/layout/helpers/components'
 import { useQuery } from '@vue/apollo-composable'
 import { latestCommentThreadsQuery } from '~~/lib/projects/graphql/queries'
 import { projectDiscussionsRoute } from '~~/lib/common/helpers/route'
+import type { Optional } from '@speckle/shared'
 
 graphql(`
   fragment ProjectPageLatestItemsComments on Project {
@@ -66,14 +67,15 @@ graphql(`
 `)
 
 const props = defineProps<{
-  project: ProjectPageLatestItemsCommentsFragment
+  projectId: string
+  project: Optional<ProjectPageLatestItemsCommentsFragment>
 }>()
 
 const { result: latestCommentsResult } = useQuery(latestCommentThreadsQuery, () => ({
-  projectId: props.project?.id
+  projectId: props.projectId
 }))
 
-const showCommentsIntro = computed(
-  () => props.project.commentThreadCount.totalCount < 1
+const showCommentsIntro = computed(() =>
+  props.project ? props.project.commentThreadCount.totalCount < 1 : false
 )
 </script>

packages/frontend-2/components/project/page/latest-items/Models.vue

@@ -1,8 +1,8 @@
 <template>
   <ProjectPageLatestItems
-    :count="project.modelCount.totalCount"
+    :count="project?.modelCount.totalCount || 0"
     :title="title"
-    :see-all-url="allProjectModelsRoute(project.id)"
+    :see-all-url="allProjectModelsRoute(projectId)"
     hide-heading-bottom-margin
   >
     <template #default>
@@ -12,6 +12,7 @@
           v-if="gridOrList === GridListToggleValue.List"
           :search="debouncedSearch"
           :project="project"
+          :project-id="projectId"
           disable-pagination
           @update:loading="queryLoading = $event"
           @clear-search=";(search = ''), updateSearchImmediately()"
@@ -20,14 +21,15 @@
           v-if="gridOrList === GridListToggleValue.Grid"
           :search="debouncedSearch"
           :project="project"
+          :project-id="projectId"
           disable-pagination
           @update:loading="queryLoading = $event"
           @clear-search=";(search = ''), updateSearchImmediately()"
         />
       </div>
       <ProjectPageModelsNewDialog
         v-model:open="showNewDialog"
-        :project-id="project.id"
+        :project-id="projectId"
       />
     </template>
     <template #filters>
@@ -86,7 +88,7 @@ import { debounce } from 'lodash-es'
 import { PlusIcon } from '@heroicons/vue/24/solid'
 import { CubeIcon } from '@heroicons/vue/24/outline'
 import { allProjectModelsRoute, modelRoute } from '~~/lib/common/helpers/route'
-import { SpeckleViewer } from '@speckle/shared'
+import { SpeckleViewer, type Optional } from '@speckle/shared'
 import { useMixpanel } from '~~/lib/core/composables/mp'
 
 graphql(`
@@ -100,7 +102,8 @@ graphql(`
 `)
 
 const props = defineProps<{
-  project: ProjectPageLatestItemsModelsFragment
+  projectId: string
+  project: Optional<ProjectPageLatestItemsModelsFragment>
 }>()
 
 const mp = useMixpanel()
@@ -121,12 +124,14 @@ const title = ref('Models')
 
 const gridOrList = useProjectPageItemViewType(title.value)
 
-const canContribute = computed(() => canModifyModels(props.project))
+const canContribute = computed(() =>
+  props.project ? canModifyModels(props.project) : false
+)
 const allModelsRoute = computed(() => {
   const resourceIdString = SpeckleViewer.ViewerRoute.resourceBuilder()
     .addAllModels()
     .toString()
-  return modelRoute(props.project.id, resourceIdString)
+  return modelRoute(props.projectId, resourceIdString)
 })
 
 const updateDebouncedSearch = debounce(() => {

packages/frontend-2/components/project/page/models/Card.vue

@@ -34,7 +34,7 @@
         >
           <ProjectCardImportFileArea
             ref="importArea"
-            :project-id="project.id"
+            :project-id="projectId"
             :model-name="model.name"
             class="h-full w-full"
           />
@@ -69,7 +69,7 @@
             rounded
             size="xs"
             :icon-left="ArrowPathRoundedSquareIcon"
-            :to="modelVersionsRoute(project.id, model.id)"
+            :to="modelVersionsRoute(projectId, model.id)"
             :class="`transition ${
               hovered ? 'inline-block opacity-100' : 'sm:hidden sm:opacity-0'
             }`"
@@ -80,7 +80,7 @@
             v-if="showActions && !isPendingModelFragment(model)"
             v-model:open="showActionsMenu"
             :model="model"
-            :project-id="project.id"
+            :project-id="projectId"
             :can-edit="canEdit"
             @click.stop.prevent
             @upload-version="triggerVersionUpload"
@@ -103,7 +103,7 @@
         class="absolute top-0 left-0 p-2"
       >
         <ProjectPageModelsCardAutomationStatusRefactor
-          :project-id="project.id"
+          :project-id="projectId"
           :model-or-version="{
             ...model,
             automationStatus: model.automationStatus
@@ -129,7 +129,7 @@ import { modelRoute, modelVersionsRoute } from '~~/lib/common/helpers/route'
 import { graphql } from '~~/lib/common/generated/gql'
 import { canModifyModels } from '~~/lib/projects/helpers/permissions'
 import { isPendingModelFragment } from '~~/lib/projects/helpers/models'
-import type { Nullable } from '@speckle/shared'
+import type { Nullable, Optional } from '@speckle/shared'
 import { keyboardClick } from '@speckle/ui-components'
 
 graphql(`
@@ -145,8 +145,9 @@ const emit = defineEmits<{
 
 const props = withDefaults(
   defineProps<{
+    projectId: string
     model: ProjectPageLatestItemsModelItemFragment | PendingFileUploadFragment
-    project: ProjectPageModelsCardProjectFragment
+    project: Optional<ProjectPageModelsCardProjectFragment>
     showVersions?: boolean
     showActions?: boolean
     disableDefaultLink?: boolean
@@ -159,7 +160,8 @@ const props = withDefaults(
   }
 )
 
-provide('projectId', props.project.id)
+// TODO: Get rid of this, its not reactive. Is it even necessary?
+provide('projectId', props.projectId)
 
 const importArea = ref(
   null as Nullable<{
@@ -206,7 +208,7 @@ const updatedAt = computed(() => {
 const finalShowVersions = computed(
   () => props.showVersions && !isPendingModelFragment(props.model)
 )
-const canEdit = computed(() => canModifyModels(props.project))
+const canEdit = computed(() => (props.project ? canModifyModels(props.project) : false))
 const versionCount = computed(() => {
   return isPendingModelFragment(props.model) ? 0 : props.model.versionCount.totalCount
 })
@@ -218,7 +220,7 @@ const pendingVersion = computed(() => {
 })
 
 const finalModelUrl = computed(() =>
-  defaultLinkDisabled.value ? undefined : modelRoute(props.project.id, props.model.id)
+  defaultLinkDisabled.value ? undefined : modelRoute(props.projectId, props.model.id)
 )
 
 const triggerVersionUpload = () => {

packages/frontend-2/components/project/page/models/CardView.vue

@@ -6,6 +6,7 @@
         v-for="(item, i) in items"
         :key="item.id"
         :model="item"
+        :project-id="projectId"
         :project="project"
         :show-actions="showActions"
         :show-versions="showVersions"
@@ -17,7 +18,7 @@
     <FormButtonSecondaryViewAll
       v-if="showViewAll"
       class="mt-4"
-      :to="allProjectModelsRoute(project.id)"
+      :to="allProjectModelsRoute(projectId)"
     />
   </template>
   <template v-else-if="!areQueriesLoading">
@@ -26,7 +27,7 @@
       @clear-search="() => $emit('clear-search')"
     />
     <div v-else>
-      <ProjectCardImportFileArea :project-id="project.id" class="h-36 col-span-4" />
+      <ProjectCardImportFileArea :project-id="projectId" class="h-36 col-span-4" />
     </div>
   </template>
   <InfiniteLoading
@@ -46,7 +47,7 @@ import {
   latestModelsPaginationQuery,
   latestModelsQuery
 } from '~~/lib/projects/graphql/queries'
-import type { Nullable, SourceAppDefinition } from '@speckle/shared'
+import type { Nullable, Optional, SourceAppDefinition } from '@speckle/shared'
 import type { InfiniteLoaderState } from '~~/lib/global/helpers/components'
 import { allProjectModelsRoute } from '~~/lib/common/helpers/route'
 
@@ -58,7 +59,8 @@ const emit = defineEmits<{
 
 const props = withDefaults(
   defineProps<{
-    project: ProjectPageLatestItemsModelsFragment
+    projectId: string
+    project: Optional<ProjectPageLatestItemsModelsFragment>
     search?: string
     showActions?: boolean
     showVersions?: boolean
@@ -80,7 +82,7 @@ const areQueriesLoading = useQueryLoading()
 
 const latestModelsQueryVariables = computed(
   (): ProjectLatestModelsPaginationQueryVariables => ({
-    projectId: props.project.id,
+    projectId: props.projectId,
     filter: {
       search: props.search || null,
       excludeIds: props.excludedIds || null,

packages/frontend-2/components/project/page/models/ListView.vue

@@ -12,7 +12,7 @@
     </div>
     <FormButtonSecondaryViewAll
       v-if="showViewAll"
-      :to="allProjectModelsRoute(project.id)"
+      :to="allProjectModelsRoute(projectId)"
     />
   </div>
   <template v-else-if="!areQueriesLoading">
@@ -25,7 +25,7 @@
       @clear-search="$emit('clear-search')"
     />
     <div v-else>
-      <ProjectCardImportFileArea :project-id="project.id" class="h-36 col-span-4" />
+      <ProjectCardImportFileArea :project-id="projectId" class="h-36 col-span-4" />
     </div>
   </template>
   <InfiniteLoading
@@ -35,7 +35,7 @@
   />
   <ProjectPageModelsNewDialog
     v-model:open="showNewDialog"
-    :project-id="project.id"
+    :project-id="projectId"
     :parent-model-name="newSubmodelParent || undefined"
   />
 </template>
@@ -62,7 +62,8 @@ const emit = defineEmits<{
 }>()
 
 const props = defineProps<{
-  project: ProjectPageLatestItemsModelsFragment
+  projectId: string
+  project?: ProjectPageLatestItemsModelsFragment
   search?: string
   disablePagination?: boolean
   sourceApps?: SourceAppDefinition[]
@@ -84,11 +85,10 @@ const showNewDialog = computed({
 
 const evictModelFields = useEvictProjectModelFields()
 const areQueriesLoading = useQueryLoading()
-const projectId = computed(() => props.project.id)
 
 const baseQueryVariables = computed(
   (): ProjectModelsTreeTopLevelQueryVariables => ({
-    projectId: projectId.value,
+    projectId: props.projectId,
     filter: {
       search: props.search || null,
       sourceApps: props.sourceApps?.length
@@ -148,7 +148,9 @@ const topLevelItems = computed(
       props.disablePagination ? 8 : undefined
     )
 )
-const canContribute = computed(() => canModifyModels(props.project))
+const canContribute = computed(() =>
+  props.project ? canModifyModels(props.project) : false
+)
 const isUsingSearch = computed(() => !!resultVariables.value?.filter?.search)
 const moreToLoad = computed(
   () =>
@@ -160,7 +162,7 @@ const showViewAll = computed(() => moreToLoad.value && props.disablePagination)
 
 const onModelUpdated = () => {
   // Evict model data
-  evictModelFields(props.project.id)
+  evictModelFields(props.projectId)
 
   // Reset pagination
   infiniteLoadCacheBuster.value++

packages/frontend-2/components/projects/ProjectDashboardCard.vue

@@ -43,6 +43,7 @@
           :key="pendingModel.id"
           :model="pendingModel"
           :project="project"
+          :project-id="project.id"
           height="h-52"
         />
         <ProjectPageModelsCard
@@ -52,6 +53,7 @@
           :project="project"
           :show-versions="false"
           :show-actions="false"
+          :project-id="project.id"
           height="h-52"
         />
         <ProjectCardImportFileArea