From 47b9e9c5bcb89e54872e0e9ff8293cc0bb832d6c Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabians@speckle.systems>
Date: Thu, 21 Aug 2025 07:50:57 +0300
Subject: [PATCH] fix(fe2): various performance fixes (#5278)

* fix(fe2): buggy merge policies causing cache read failures

* improved CWV reporting

* improved preview lcp

* more eager load improvements

* more eager load improvements

* SSR friendly relative time

* import fixes
---
 .../WorkspaceSwitcher/WorkspaceSwitcher.vue   | 18 ++---
 .../frontend-2/components/preview/Image.vue   |  9 ++-
 .../project/model-page/versions/Card.vue      |  1 +
 .../page/latest-items/comments/GridItem.vue   |  1 +
 .../page/latest-items/comments/ListItem.vue   |  1 +
 .../project/page/models/StructureItem.vue     |  1 +
 .../project/page/models/UploadsDialog.vue     |  1 +
 .../project/page/models/card/UpdatedTime.vue  |  5 +-
 .../project/page/settings/tokens/Tokens.vue   |  2 +-
 .../projects/ProjectDashboardCard.vue         |  1 +
 .../settings/shared/projects/index.vue        |  1 +
 .../workspaces/members/GuestsTable.vue        |  1 +
 .../workspaces/members/InvitesTable.vue       |  1 +
 .../workspaces/members/JoinRequestsTable.vue  |  1 +
 .../workspaces/members/MembersTable.vue       |  1 +
 .../singleton/FileUploadErrorDialog.vue       |  1 +
 .../viewer/anchored-point/thread/Comment.vue  |  1 +
 .../components/viewer/comments/ListItem.vue   |  1 +
 .../viewer/compare-changes/Version.vue        |  1 +
 .../components/viewer/models/Card.vue         |  1 +
 .../viewer/models/versions/ActiveCard.vue     |  1 +
 .../viewer/models/versions/Card.vue           |  1 +
 .../viewer/resources/VersionCard.vue          |  1 +
 .../viewer/saved-views/panel/View.vue         |  1 +
 .../dateFormatter.ts => composables/dates.ts} | 61 +++++++++++++---
 .../frontend-2/lib/core/configs/apollo.ts     |  5 +-
 .../lib/core/helpers/apolloSetup.ts           | 10 +--
 .../lib/projects/composables/previewImage.ts  | 71 ++++++++++++++++---
 packages/frontend-2/package.json              |  2 +-
 packages/frontend-2/plugins/010-hydration.ts  | 18 +++++
 packages/frontend-2/plugins/020-rum.ts        | 15 +++-
 yarn.lock                                     | 10 +--
 32 files changed, 200 insertions(+), 46 deletions(-)
 rename packages/frontend-2/{utils/dateFormatter.ts => composables/dates.ts} (53%)
 create mode 100644 packages/frontend-2/plugins/010-hydration.ts

diff --git a/packages/frontend-2/components/header/WorkspaceSwitcher/WorkspaceSwitcher.vue b/packages/frontend-2/components/header/WorkspaceSwitcher/WorkspaceSwitcher.vue
index 495248d04..999c6c925 100644
--- a/packages/frontend-2/components/header/WorkspaceSwitcher/WorkspaceSwitcher.vue
+++ b/packages/frontend-2/components/header/WorkspaceSwitcher/WorkspaceSwitcher.vue
@@ -180,12 +180,14 @@ const hasDiscoverableWorkspacesOrJoinRequests = computed(
   () => discoverableWorkspacesAndJoinRequestsCount.value > 0
 )
 
-onActiveWorkspaceResult(({ data }) => {
-  if (data?.activeUser?.activeWorkspace) {
-    $intercom.updateCompany({
-      id: data.activeUser.activeWorkspace.id,
-      name: data.activeUser.activeWorkspace.name
-    })
-  }
-})
+if (import.meta.client) {
+  onActiveWorkspaceResult(({ data }) => {
+    if (data?.activeUser?.activeWorkspace) {
+      $intercom.updateCompany({
+        id: data.activeUser.activeWorkspace.id,
+        name: data.activeUser.activeWorkspace.name
+      })
+    }
+  })
+}
 </script>
diff --git a/packages/frontend-2/components/preview/Image.vue b/packages/frontend-2/components/preview/Image.vue
index 9eebc01dd..a27613428 100644
--- a/packages/frontend-2/components/preview/Image.vue
+++ b/packages/frontend-2/components/preview/Image.vue
@@ -89,9 +89,11 @@ const props = withDefaults(
   defineProps<{
     previewUrl: string
     panoramaOnHover?: boolean
+    eagerLoad?: boolean
   }>(),
   {
-    panoramaOnHover: true
+    panoramaOnHover: true,
+    eagerLoad: true
   }
 )
 
@@ -109,7 +111,10 @@ const {
   isLoadingPanorama,
   hasDoneFirstLoad,
   isPanoramaPlaceholder
-} = usePreviewImageBlob(basePreviewUrl, { enabled: isInViewport })
+} = usePreviewImageBlob(basePreviewUrl, {
+  enabled: isInViewport,
+  eagerLoad: props.eagerLoad
+})
 
 const hovered = ref(false)
 const panorama = ref(null as Nullable<HTMLDivElement>)
diff --git a/packages/frontend-2/components/project/model-page/versions/Card.vue b/packages/frontend-2/components/project/model-page/versions/Card.vue
index 5591643ef..ca564d7a2 100644
--- a/packages/frontend-2/components/project/model-page/versions/Card.vue
+++ b/packages/frontend-2/components/project/model-page/versions/Card.vue
@@ -171,6 +171,7 @@ const props = defineProps<{
   selected?: boolean
 }>()
 
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 const isAutomateModuleEnabled = useIsAutomateModuleEnabled()
 
 const showActionsMenu = ref(false)
diff --git a/packages/frontend-2/components/project/page/latest-items/comments/GridItem.vue b/packages/frontend-2/components/project/page/latest-items/comments/GridItem.vue
index f6fcf0a4d..4c39125ef 100644
--- a/packages/frontend-2/components/project/page/latest-items/comments/GridItem.vue
+++ b/packages/frontend-2/components/project/page/latest-items/comments/GridItem.vue
@@ -74,6 +74,7 @@ const props = defineProps<{
 const { screenshot } = useCommentScreenshotImage(
   computed(() => props.thread.screenshot)
 )
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const isLimited = computed(() => {
   return !props.thread.rawText
diff --git a/packages/frontend-2/components/project/page/latest-items/comments/ListItem.vue b/packages/frontend-2/components/project/page/latest-items/comments/ListItem.vue
index 79101ef6a..ada195cb2 100644
--- a/packages/frontend-2/components/project/page/latest-items/comments/ListItem.vue
+++ b/packages/frontend-2/components/project/page/latest-items/comments/ListItem.vue
@@ -57,6 +57,7 @@ const props = defineProps<{
 const { backgroundImage } = useCommentScreenshotImage(
   computed(() => props.thread.screenshot)
 )
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const updatedAt = computed(() => {
   return {
diff --git a/packages/frontend-2/components/project/page/models/StructureItem.vue b/packages/frontend-2/components/project/page/models/StructureItem.vue
index 962291726..5c6782ca1 100644
--- a/packages/frontend-2/components/project/page/models/StructureItem.vue
+++ b/packages/frontend-2/components/project/page/models/StructureItem.vue
@@ -339,6 +339,7 @@ const props = defineProps<{
 }>()
 
 const router = useRouter()
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const importArea = ref(
   null as Nullable<{
diff --git a/packages/frontend-2/components/project/page/models/UploadsDialog.vue b/packages/frontend-2/components/project/page/models/UploadsDialog.vue
index 20ec8b16e..5140e7cdd 100644
--- a/packages/frontend-2/components/project/page/models/UploadsDialog.vue
+++ b/packages/frontend-2/components/project/page/models/UploadsDialog.vue
@@ -146,6 +146,7 @@ const props = defineProps<{
 
 const open = defineModel<boolean>('open', { required: true })
 const { copy } = useClipboard()
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const { getErrorMessage, convertUploadToFailedJob } = useFailedFileImportJobUtils()
 const {
diff --git a/packages/frontend-2/components/project/page/models/card/UpdatedTime.vue b/packages/frontend-2/components/project/page/models/card/UpdatedTime.vue
index 8a7f65f36..3ef074275 100644
--- a/packages/frontend-2/components/project/page/models/card/UpdatedTime.vue
+++ b/packages/frontend-2/components/project/page/models/card/UpdatedTime.vue
@@ -7,15 +7,16 @@
   </div>
 </template>
 <script setup lang="ts">
-import { formattedFullDate } from '~/utils/dateFormatter'
 /**
  * Separate component so that hydration mismatches only cause this component to re-render, not the entire model card.
  * Hydration mismatches can happen here when the server resolves the update as X minutes ago, but the client resolves it as X minutes and 1 second ago.
+ *
+ * @deprecated Formatted dates now use a SSR-friendly now() date, so this doesnt need to be used anymore
  */
-
 const props = defineProps<{
   updatedAt: string
 }>()
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const updatedAtFormatted = computed(() => {
   return {
diff --git a/packages/frontend-2/components/project/page/settings/tokens/Tokens.vue b/packages/frontend-2/components/project/page/settings/tokens/Tokens.vue
index b074653f9..ecbf64cf2 100644
--- a/packages/frontend-2/components/project/page/settings/tokens/Tokens.vue
+++ b/packages/frontend-2/components/project/page/settings/tokens/Tokens.vue
@@ -66,7 +66,6 @@ import { TrashIcon } from '@heroicons/vue/24/outline'
 import { projectEmbedTokensQuery } from '~~/lib/projects/graphql/queries'
 import type { EmbedTokenItem } from '~~/lib/projects/helpers/types'
 import { graphql } from '~/lib/common/generated/gql'
-import { formattedFullDate } from '~/utils/dateFormatter'
 import { useDeleteEmbedToken } from '~~/lib/projects/composables/tokenManagement'
 import { usePaginatedQuery } from '~/lib/common/composables/graphql'
 import type { Nullable } from '@speckle/shared'
@@ -107,6 +106,7 @@ graphql(`
   }
 `)
 
+const { formattedFullDate } = useDateFormatters()
 const route = useRoute()
 const projectId = computed(() => route.params.id as string)
 const deleteEmbedToken = useDeleteEmbedToken()
diff --git a/packages/frontend-2/components/projects/ProjectDashboardCard.vue b/packages/frontend-2/components/projects/ProjectDashboardCard.vue
index afad82d95..b877dd338 100644
--- a/packages/frontend-2/components/projects/ProjectDashboardCard.vue
+++ b/packages/frontend-2/components/projects/ProjectDashboardCard.vue
@@ -143,6 +143,7 @@ const props = defineProps<{
 
 const router = useRouter()
 const isWorkspacesEnabled = useIsWorkspacesEnabled()
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const isModelUploading = ref(false)
 
diff --git a/packages/frontend-2/components/settings/shared/projects/index.vue b/packages/frontend-2/components/settings/shared/projects/index.vue
index daf80fab6..977c285ef 100644
--- a/packages/frontend-2/components/settings/shared/projects/index.vue
+++ b/packages/frontend-2/components/settings/shared/projects/index.vue
@@ -167,6 +167,7 @@ const props = defineProps<{
   workspace: MaybeNullOrUndefined<SettingsSharedProjects_WorkspaceFragment>
 }>()
 
+const { formattedFullDate } = useDateFormatters()
 const { activeUser } = useActiveUser()
 const canCreatePersonal = useCanCreatePersonalProject({
   activeUser: computed(() => activeUser.value)
diff --git a/packages/frontend-2/components/settings/workspaces/members/GuestsTable.vue b/packages/frontend-2/components/settings/workspaces/members/GuestsTable.vue
index 5052c016e..5e56eb086 100644
--- a/packages/frontend-2/components/settings/workspaces/members/GuestsTable.vue
+++ b/packages/frontend-2/components/settings/workspaces/members/GuestsTable.vue
@@ -133,6 +133,7 @@ const props = defineProps<{
   workspaceSlug: string
 }>()
 
+const { formattedFullDate } = useDateFormatters()
 const { result } = useQuery(settingsWorkspacesMembersTableQuery, () => ({
   slug: props.workspaceSlug
 }))
diff --git a/packages/frontend-2/components/settings/workspaces/members/InvitesTable.vue b/packages/frontend-2/components/settings/workspaces/members/InvitesTable.vue
index 9dd7a61dd..acdb696cd 100644
--- a/packages/frontend-2/components/settings/workspaces/members/InvitesTable.vue
+++ b/packages/frontend-2/components/settings/workspaces/members/InvitesTable.vue
@@ -129,6 +129,7 @@ const props = defineProps<{
 const search = ref('')
 const showActionsMenu = ref<Record<string, boolean>>({})
 
+const { formattedFullDate } = useDateFormatters()
 const cancelInvite = useCancelWorkspaceInvite()
 const resendInvite = useResendWorkspaceInvite()
 const { result: searchResult, loading: searchResultLoading } = useQuery(
diff --git a/packages/frontend-2/components/settings/workspaces/members/JoinRequestsTable.vue b/packages/frontend-2/components/settings/workspaces/members/JoinRequestsTable.vue
index ee76a2d3f..c60ecbeb3 100644
--- a/packages/frontend-2/components/settings/workspaces/members/JoinRequestsTable.vue
+++ b/packages/frontend-2/components/settings/workspaces/members/JoinRequestsTable.vue
@@ -99,6 +99,7 @@ const props = defineProps<{
 }>()
 
 const { deny } = useWorkspaceJoinRequest()
+const { formattedFullDate } = useDateFormatters()
 
 const showApproveJoinRequestDialog = ref(false)
 const requestToApprove =
diff --git a/packages/frontend-2/components/settings/workspaces/members/MembersTable.vue b/packages/frontend-2/components/settings/workspaces/members/MembersTable.vue
index ca9c87671..9860c3bd4 100644
--- a/packages/frontend-2/components/settings/workspaces/members/MembersTable.vue
+++ b/packages/frontend-2/components/settings/workspaces/members/MembersTable.vue
@@ -146,6 +146,7 @@ const { activeUser } = useActiveUser()
 const { result } = useQuery(settingsWorkspacesMembersTableQuery, () => ({
   slug: props.workspaceSlug
 }))
+const { formattedFullDate } = useDateFormatters()
 
 const selectedAction = ref<Record<string, WorkspaceUserActionTypes>>({})
 const search = ref('')
diff --git a/packages/frontend-2/components/singleton/FileUploadErrorDialog.vue b/packages/frontend-2/components/singleton/FileUploadErrorDialog.vue
index b3b5d5c55..474d83b34 100644
--- a/packages/frontend-2/components/singleton/FileUploadErrorDialog.vue
+++ b/packages/frontend-2/components/singleton/FileUploadErrorDialog.vue
@@ -78,6 +78,7 @@ const { getErrorMessage } = useFailedFileImportJobUtils()
 
 const { copyReference } = useGenerateErrorReference()
 const navigateToProject = useNavigateToProject()
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const open = computed({
   get: () => failedJobs.value.length > 0,
diff --git a/packages/frontend-2/components/viewer/anchored-point/thread/Comment.vue b/packages/frontend-2/components/viewer/anchored-point/thread/Comment.vue
index 46af8b9f7..3cddb238f 100644
--- a/packages/frontend-2/components/viewer/anchored-point/thread/Comment.vue
+++ b/packages/frontend-2/components/viewer/anchored-point/thread/Comment.vue
@@ -59,6 +59,7 @@ const {
     response: { project }
   }
 } = useInjectedViewerState()
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const createdAt = computed(() => {
   return {
diff --git a/packages/frontend-2/components/viewer/comments/ListItem.vue b/packages/frontend-2/components/viewer/comments/ListItem.vue
index 604b315fe..7b1c20f34 100644
--- a/packages/frontend-2/components/viewer/comments/ListItem.vue
+++ b/packages/frontend-2/components/viewer/comments/ListItem.vue
@@ -119,6 +119,7 @@ const open = (id: string) => {
 
 const { calculateThreadResourceStatus } = useCommentContext()
 const itemStatus = computed(() => calculateThreadResourceStatus(props.thread))
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const createdAt = computed(() => {
   return {
diff --git a/packages/frontend-2/components/viewer/compare-changes/Version.vue b/packages/frontend-2/components/viewer/compare-changes/Version.vue
index 90422a230..e6804fb4c 100644
--- a/packages/frontend-2/components/viewer/compare-changes/Version.vue
+++ b/packages/frontend-2/components/viewer/compare-changes/Version.vue
@@ -24,6 +24,7 @@ const props = defineProps<{
   version: ViewerModelVersionCardItemFragment
   isNewest: boolean
 }>()
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const createdAt = computed(() => {
   return {
diff --git a/packages/frontend-2/components/viewer/models/Card.vue b/packages/frontend-2/components/viewer/models/Card.vue
index 69fcb0276..6c41eee9d 100644
--- a/packages/frontend-2/components/viewer/models/Card.vue
+++ b/packages/frontend-2/components/viewer/models/Card.vue
@@ -141,6 +141,7 @@ const {
   }
 } = useInjectedViewerState()
 const mp = useMixpanel()
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const route = useRoute()
 const resourceIdString = computed(() => {
diff --git a/packages/frontend-2/components/viewer/models/versions/ActiveCard.vue b/packages/frontend-2/components/viewer/models/versions/ActiveCard.vue
index 54ba17933..6a605c5a3 100644
--- a/packages/frontend-2/components/viewer/models/versions/ActiveCard.vue
+++ b/packages/frontend-2/components/viewer/models/versions/ActiveCard.vue
@@ -33,6 +33,7 @@ interface Version {
 const props = defineProps<{
   version: Version
 }>()
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const createdAt = computed(() => {
   return {
diff --git a/packages/frontend-2/components/viewer/models/versions/Card.vue b/packages/frontend-2/components/viewer/models/versions/Card.vue
index 79d2fd175..86737877d 100644
--- a/packages/frontend-2/components/viewer/models/versions/Card.vue
+++ b/packages/frontend-2/components/viewer/models/versions/Card.vue
@@ -121,6 +121,7 @@ const {
     response: { project }
   }
 } = useInjectedViewerState()
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const showVersions = ref(!!props.initiallyExpanded)
 const showDeleteDialog = ref(false)
diff --git a/packages/frontend-2/components/viewer/resources/VersionCard.vue b/packages/frontend-2/components/viewer/resources/VersionCard.vue
index 43f3ca3ae..162188a76 100644
--- a/packages/frontend-2/components/viewer/resources/VersionCard.vue
+++ b/packages/frontend-2/components/viewer/resources/VersionCard.vue
@@ -142,6 +142,7 @@ const {
   }
 } = useInjectedViewerState()
 const copyModelLink = useCopyModelLink()
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const isLoaded = computed(() => props.isLoadedVersion)
 const isLatest = computed(() => props.isLatestVersion)
diff --git a/packages/frontend-2/components/viewer/saved-views/panel/View.vue b/packages/frontend-2/components/viewer/saved-views/panel/View.vue
index 47abe1871..3b7a44c17 100644
--- a/packages/frontend-2/components/viewer/saved-views/panel/View.vue
+++ b/packages/frontend-2/components/viewer/saved-views/panel/View.vue
@@ -158,6 +158,7 @@ const updateView = useUpdateSavedView()
 const isLoading = useMutationLoading()
 const { copyLink, applyView } = useViewerSavedViewsUtils()
 const eventBus = useEventBus()
+const { formattedRelativeDate, formattedFullDate } = useDateFormatters()
 
 const showMenu = ref(false)
 const menuId = useId()
diff --git a/packages/frontend-2/utils/dateFormatter.ts b/packages/frontend-2/composables/dates.ts
similarity index 53%
rename from packages/frontend-2/utils/dateFormatter.ts
rename to packages/frontend-2/composables/dates.ts
index 0d7f35b6e..b81cbb164 100644
--- a/packages/frontend-2/utils/dateFormatter.ts
+++ b/packages/frontend-2/composables/dates.ts
@@ -7,9 +7,14 @@ import dayjs from 'dayjs'
  * customRelativeTime('2023-07-16') - returns "Jul 16" or "Jul 16, 2023" if the year is different from the current year
  * customRelativeTime(new Date()) - returns "just now"
  */
-const customRelativeTime = (date: ConfigType, capitalize?: boolean): string => {
+const customRelativeTime = (
+  date: ConfigType,
+  now: ConfigType,
+  capitalize?: boolean
+): string => {
   const pastDate = dayjs(date)
-  const now = dayjs()
+  now = dayjs(now)
+
   const diffInMinutes = now.diff(date, 'minute')
   const diffInHours = now.diff(date, 'hour')
   const diffInDays = now.diff(date, 'day')
@@ -35,8 +40,8 @@ const customRelativeTime = (date: ConfigType, capitalize?: boolean): string => {
  * isTimeframe('2023-07-16') - returns false
  * isTimeframe(new Date()) - returns true or false depending on the current time
  */
-const isTimeframe = (date: ConfigType) => {
-  const unit = customRelativeTime(date)
+const isTimeframe = (date: ConfigType, now: ConfigType) => {
+  const unit = customRelativeTime(date, now)
   return (
     unit.includes('second') ||
     unit.includes('minute') ||
@@ -51,7 +56,7 @@ const isTimeframe = (date: ConfigType) => {
  * @example
  * formattedFullDate('2023-12-01') - returns "Dec 12, 2023"
  */
-export const formattedFullDate = (date: ConfigType): string =>
+const formattedFullDate = (date: ConfigType): string =>
   dayjs(date).format('MMM D, YYYY, H:mm')
 
 /**
@@ -63,15 +68,51 @@ export const formattedFullDate = (date: ConfigType): string =>
  * formattedRelativeDate('2023-12-31') -  returns "1 day ago"
  * formattedRelativeDate('2023-12-31', { prefix: true }) -  returns "1 day ago"
  */
-export const formattedRelativeDate = (
+const formattedRelativeDate = (
   date: ConfigType,
+  now: ConfigType,
   options?: Partial<{ prefix: boolean; capitalize: boolean }>
 ): string => {
   if (options?.prefix) {
-    return isTimeframe(date)
-      ? customRelativeTime(date, options?.capitalize)
-      : `on ${customRelativeTime(date)}`
+    return isTimeframe(date, now)
+      ? customRelativeTime(date, now, options?.capitalize)
+      : `on ${customRelativeTime(date, now)}`
   } else {
-    return customRelativeTime(date, options?.capitalize)
+    return customRelativeTime(date, now, options?.capitalize)
+  }
+}
+
+// Remembering and reusing same now() value in SSR and CSR to avoid hydration mismatches
+const useNowState = () => useState('now', () => new Date())
+
+export const useDateFormatters = () => {
+  const state = useNowState()
+  const { $isAppHydrated } = useNuxtApp()
+
+  return {
+    /**
+     * Formats a given date input into a relative time string with optional prefix
+     * @example
+     * Assuming today is January 1st 2024
+     * formattedRelativeDate('2023-12-01') - returns "Dec 12, 2023"
+     * formattedRelativeDate('2023-12-01', { prefix: true }) - returns "on Dec 12, 2023"
+     * formattedRelativeDate('2023-12-31') -  returns "1 day ago"
+     * formattedRelativeDate('2023-12-31', { prefix: true }) -  returns "1 day ago"
+     */
+    formattedRelativeDate: (
+      date: ConfigType,
+      options?: Partial<{ prefix: boolean; capitalize: boolean; now: ConfigType }>
+    ): string => {
+      // during SSR and hydration use static now, afterwards use a fresh one each time
+      // (unless if specific one fed in)
+      const now = options?.now || ($isAppHydrated.value ? new Date() : state.value)
+      return formattedRelativeDate(date, now, options)
+    },
+    /**
+     * Formats a given date input into a full date string with our default format
+     * @example
+     * formattedFullDate('2023-12-01') - returns "Dec 12, 2023"
+     */
+    formattedFullDate
   }
 }
diff --git a/packages/frontend-2/lib/core/configs/apollo.ts b/packages/frontend-2/lib/core/configs/apollo.ts
index 0aacadff8..f2703b16e 100644
--- a/packages/frontend-2/lib/core/configs/apollo.ts
+++ b/packages/frontend-2/lib/core/configs/apollo.ts
@@ -321,6 +321,9 @@ function createCache(): InMemoryCache {
       ServerConfiguration: {
         merge: true
       },
+      WorkspaceSubscription: {
+        merge: true
+      },
       CommentThreadActivityMessage: {
         merge: true
       },
@@ -354,7 +357,7 @@ function createCache(): InMemoryCache {
       Workspace: {
         fields: {
           invitedTeam: {
-            merge: (_existing, incoming) => incoming
+            merge: incomingOverwritesExistingMergeFunction
           },
           team: {
             keyArgs: ['limit', 'filter', ['roles', 'search', 'seatType']],
diff --git a/packages/frontend-2/lib/core/helpers/apolloSetup.ts b/packages/frontend-2/lib/core/helpers/apolloSetup.ts
index 8dfa824f1..b7c65ce09 100644
--- a/packages/frontend-2/lib/core/helpers/apolloSetup.ts
+++ b/packages/frontend-2/lib/core/helpers/apolloSetup.ts
@@ -113,6 +113,7 @@ export function buildAbstractCollectionMergeFunction<T extends string>(
     }
 
     return {
+      ...(existing || {}),
       ...(incoming || {}),
       ...(finalItems ? { items: finalItems } : {}),
       __typename: incoming?.__typename || existing?.__typename || typeName
@@ -132,7 +133,8 @@ export const incomingOverwritesExistingMergeFunction: FieldMergeFunction = (
   incoming: unknown
 ) => incoming
 
-export const mergeAsObjectsFunction: FieldMergeFunction = (existing, incoming) => ({
-  ...existing,
-  ...incoming
-})
+export const mergeAsObjectsFunction: FieldMergeFunction = (
+  existing,
+  incoming,
+  { mergeObjects }
+) => mergeObjects(existing, incoming) // built in apollo logic is more foolproof
diff --git a/packages/frontend-2/lib/projects/composables/previewImage.ts b/packages/frontend-2/lib/projects/composables/previewImage.ts
index b5443545b..45283b73f 100644
--- a/packages/frontend-2/lib/projects/composables/previewImage.ts
+++ b/packages/frontend-2/lib/projects/composables/previewImage.ts
@@ -5,6 +5,20 @@ import { useSubscription } from '@vue/apollo-composable'
 import { useLock } from '~~/lib/common/composables/singleton'
 import PreviewPlaceholder from '~~/assets/images/preview_placeholder.png'
 import { isValidBase64Image } from '@speckle/shared/images/base64'
+import { nanoid } from 'nanoid'
+
+/**
+ * Eager loading previews ensures a better LCP score, but also hits the preview endpoint more often.
+ * Since we don't know the viewport size in SSR, we can just set a limit of how many previews to eager
+ * load after which they should use spinners.
+ *
+ * Theoretically even 1 eager load will fix the LCP issue, but it will look odd if all of the other ones
+ * show up as spinners. So ideally just set enough for 1 page load.
+ *
+ * Assuming a large screen w/ the busiest preview page (project page w/ model grid), there would be
+ * about 20 previews
+ */
+const PREVIEWS_EAGER_LOAD_COUNT = 20
 
 const previewUrlProjectIdRegexp = /\/preview\/([\w\d]+)\//i
 const previewUrlCommitIdRegexp = /\/commits\/([\w\d]+)/i
@@ -12,6 +26,14 @@ const previewUrlObjectIdRegexp = /\/commits\/([\w\d]+)/i
 
 class AngleNotFoundError extends Error {}
 
+const usePreviewsState = () =>
+  useState('preview_images_load_state', () => ({
+    /**
+     * How many previews have already been eager loaded
+     */
+    eagerLoadedKeys: new Set<string>()
+  }))
+
 /**
  * Get authenticated preview image URL and subscribes to preview image generation events so that the preview image URL
  * is updated whenever generation finishes
@@ -23,18 +45,47 @@ export function usePreviewImageBlob(
      * Allows disabling the mechanism conditionally (e.g. if image not in viewport)
      */
     enabled: MaybeRef<boolean>
+    /**
+     * Whether to avoid spinners and just embed the image immediately. Means we will likely
+     * load a lot more than needed, but also get a way better LCP score (no spinners).
+     *
+     * If enabled, overrides `enabled` to be true.
+     */
+    eagerLoad: boolean
   }>
 ) {
+  // Checking if we're allowed to eager load
+  const { $isAppHydrated } = useNuxtApp()
+  const state = usePreviewsState()
+  const eagerLoad =
+    options?.eagerLoad &&
+    !$isAppHydrated.value &&
+    state.value.eagerLoadedKeys.size < PREVIEWS_EAGER_LOAD_COUNT
+  const eagerLoadKey = nanoid()
+
+  if (eagerLoad) {
+    state.value.eagerLoadedKeys.add(eagerLoadKey)
+  }
+
+  // Continue on with normal operation
   const { enabled = ref(true) } = options || {}
   const logger = useLogger()
+  const lazyLoad = !eagerLoad
 
-  const url = ref(PreviewPlaceholder as Nullable<string>)
-  const hasDoneFirstLoad = ref(false)
+  const url = ref<Nullable<string>>(
+    (eagerLoad ? unref(previewUrl) : PreviewPlaceholder) || null
+  )
+  const hasDoneFirstLoad = ref(eagerLoad)
   const panoramaUrl = ref(null as Nullable<string>)
   const isLoadingPanorama = ref(false)
   const shouldLoadPanorama = ref(false)
   const basePanoramaUrl = computed(() => unref(previewUrl) + '/all')
-  const isEnabled = computed(() => (import.meta.server ? true : unref(enabled)))
+  const isEnabled = computed(() => {
+    if (import.meta.server) return true // always true on server
+    if (eagerLoad) return true // always true if eagerLoad
+
+    return unref(enabled)
+  })
   const cacheBust = ref(0)
   const isPanoramaPlaceholder = ref(false)
 
@@ -137,7 +188,7 @@ export function usePreviewImageBlob(
       const blobUrl = blobUrlConfig.toString()
 
       // Load img in browser first, before we set the url
-      if (import.meta.client) {
+      if (import.meta.client && lazyLoad) {
         const img = new Image()
         img.src = blobUrl
         await new Promise((resolve, reject) => {
@@ -200,10 +251,12 @@ export function usePreviewImageBlob(
     }
   }
 
-  const regeneratePreviews = (basePreviewUrl?: string) => {
+  const regeneratePreviews = async (basePreviewUrl?: string) => {
     cacheBust.value++
-    processBasePreviewUrl(basePreviewUrl || unref(previewUrl))
-    if (shouldLoadPanorama.value) processPanoramaPreviewUrl()
+    await Promise.all([
+      processBasePreviewUrl(basePreviewUrl || unref(previewUrl)),
+      ...(shouldLoadPanorama.value ? [processPanoramaPreviewUrl()] : [])
+    ])
   }
 
   watch(shouldLoadPanorama, (newVal) => {
@@ -213,7 +266,7 @@ export function usePreviewImageBlob(
   watch(
     () => unref(previewUrl),
     (newVal) => {
-      regeneratePreviews(newVal || undefined)
+      void regeneratePreviews(newVal || undefined)
     },
     { immediate: true }
   )
@@ -223,7 +276,7 @@ export function usePreviewImageBlob(
     (newVal) => {
       if (!newVal) return
 
-      regeneratePreviews()
+      void regeneratePreviews()
     }
   )
 
diff --git a/packages/frontend-2/package.json b/packages/frontend-2/package.json
index ddc2b5d1a..7aeebec21 100644
--- a/packages/frontend-2/package.json
+++ b/packages/frontend-2/package.json
@@ -56,7 +56,7 @@
     "@tiptap/vue-3": "2.10.3",
     "@tryghost/content-api": "^1.11.21",
     "@vue/apollo-composable": "^4.2.2",
-    "@vue/apollo-ssr": "4.0.0",
+    "@vue/apollo-ssr": "4.2.2",
     "@vueuse/core": "^10.9.0",
     "apollo-upload-client": "^18.0.1",
     "dayjs": "^1.11.7",
diff --git a/packages/frontend-2/plugins/010-hydration.ts b/packages/frontend-2/plugins/010-hydration.ts
new file mode 100644
index 000000000..ecfecbed0
--- /dev/null
+++ b/packages/frontend-2/plugins/010-hydration.ts
@@ -0,0 +1,18 @@
+/**
+ * Global ref for checking if app has hydrated
+ */
+export default defineNuxtPlugin((nuxtApp) => {
+  const isAppHydrated = ref(false)
+
+  if (import.meta.client) {
+    nuxtApp.hook('app:suspense:resolve', () => {
+      isAppHydrated.value = true
+    })
+  }
+
+  return {
+    provide: {
+      isAppHydrated
+    }
+  }
+})
diff --git a/packages/frontend-2/plugins/020-rum.ts b/packages/frontend-2/plugins/020-rum.ts
index c163aaa53..32a08f531 100644
--- a/packages/frontend-2/plugins/020-rum.ts
+++ b/packages/frontend-2/plugins/020-rum.ts
@@ -126,18 +126,27 @@ async function initRumServer(app: PluginNuxtApp) {
     app.hook('app:rendered', (context) => {
       context.ssrContext!.head.push({
         script: [
+          {
+            innerHTML: `
+              new PerformanceObserver((list) => {
+                const entries = list.getEntries();
+                const last = entries[entries.length - 1];
+                // last.startTime is your current LCP candidate time
+                console.log('LCP candidate:', last.startTime, last);
+              }).observe({ type: 'largest-contentful-paint', buffered: true });
+            `,
+            type: 'module'
+          },
           {
             innerHTML: `
               import {
                 onCLS,
-                onFID,
                 onLCP,
                 onINP,
                 onTTFB
-              } from 'https://cdn.jsdelivr.net/npm/web-vitals@3/dist/web-vitals.attribution.js?module';
+              } from 'https://unpkg.com/web-vitals@5/dist/web-vitals.attribution.js?module';
 
               onCLS(console.log);
-              onFID(console.log);
               onLCP(console.log);
               onINP(console.log);
               onTTFB(console.log);
diff --git a/yarn.lock b/yarn.lock
index 524ad85f0..a1249ab50 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15981,7 +15981,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^7.12.0"
     "@typescript-eslint/parser": "npm:^7.12.0"
     "@vue/apollo-composable": "npm:^4.2.2"
-    "@vue/apollo-ssr": "npm:4.0.0"
+    "@vue/apollo-ssr": "npm:4.2.2"
     "@vueuse/core": "npm:^10.9.0"
     apollo-upload-client: "npm:^18.0.1"
     autoprefixer: "npm:^10.4.14"
@@ -20646,12 +20646,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/apollo-ssr@npm:4.0.0":
-  version: 4.0.0
-  resolution: "@vue/apollo-ssr@npm:4.0.0"
+"@vue/apollo-ssr@npm:4.2.2":
+  version: 4.2.2
+  resolution: "@vue/apollo-ssr@npm:4.2.2"
   dependencies:
     serialize-javascript: "npm:^6.0.1"
-  checksum: 10/e9a82bc27ad5ea464f0b9fb30edc7bae03b399bd3c7c8192652a00df5a0f77bf306a911ccf00e060aa72b7bd395eb5cc5abb35c60132f64387ff5ed5526e47e2
+  checksum: 10/49a8d019b590f90d954db3fcf3e7501deb978737a1ef9bcca4f05e7509242948c007d1e58f9137a5d89eae643f084cae2fe465a23a7bc3caddd3fa20b8d35c6b
   languageName: node
   linkType: hard