From 8d16c70f3ff468c69f6a3d7acf728e5ea8f2ecb5 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabians@speckle.systems>
Date: Tue, 28 Nov 2023 09:18:11 +0200
Subject: [PATCH] optimizing useLock composable & usages (#1886)

---
 .../composables/automationsStatus.ts          | 16 ++++++++------
 .../lib/common/composables/singleton.ts       |  6 ++---
 .../projects/composables/modelManagement.ts   | 22 ++++++++++++-------
 .../projects/composables/projectManagement.ts |  5 ++++-
 .../projects/composables/versionManagement.ts | 16 +++++++++-----
 5 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/packages/frontend-2/lib/automations/composables/automationsStatus.ts b/packages/frontend-2/lib/automations/composables/automationsStatus.ts
index 068cfb19c..fab489926 100644
--- a/packages/frontend-2/lib/automations/composables/automationsStatus.ts
+++ b/packages/frontend-2/lib/automations/composables/automationsStatus.ts
@@ -22,18 +22,20 @@ export const useModelVersionCardAutomationsStatusUpdateTracking = (
     cache: ApolloCache<unknown>
   ) => void
 ) => {
-  const { onResult } = useSubscription(
-    onModelVersionCardAutomationsStatusUpdated,
-    () => ({
-      projectId: unref(projectId)
-    })
-  )
-
   const { hasLock } = useLock(
     computed(
       () => `useModelVersionCardAutomationsStatusUpdateTracking-${unref(projectId)}`
     )
   )
+  const isEnabled = computed(() => !!(hasLock.value || handler))
+
+  const { onResult } = useSubscription(
+    onModelVersionCardAutomationsStatusUpdated,
+    () => ({
+      projectId: unref(projectId)
+    }),
+    { enabled: isEnabled }
+  )
 
   const apollo = useApolloClient().client
 
diff --git a/packages/frontend-2/lib/common/composables/singleton.ts b/packages/frontend-2/lib/common/composables/singleton.ts
index d7113844f..a29e8390a 100644
--- a/packages/frontend-2/lib/common/composables/singleton.ts
+++ b/packages/frontend-2/lib/common/composables/singleton.ts
@@ -4,7 +4,7 @@ import { MaybeRef } from '@vueuse/core'
 
 const useComponentLockState = () =>
   useScopedState('componentLockState', () =>
-    ref(new Array<{ key: string; instanceId: string }>())
+    shallowRef(new Array<{ key: string; instanceId: string }>())
   )
 
 /**
@@ -35,10 +35,10 @@ export const useLock = (key: MaybeRef<string>) => {
     () => {
       // If there is no active instance, mark this as the active one
       if (!lockState.value.find((lock) => lock.key === unref(key))) {
-        lockState.value.push({ key: unref(key), instanceId })
+        lockState.value = [...lockState.value, { key: unref(key), instanceId }]
       }
     },
-    { immediate: true, deep: true, flush: 'sync' }
+    { immediate: true }
   )
 
   watch(
diff --git a/packages/frontend-2/lib/projects/composables/modelManagement.ts b/packages/frontend-2/lib/projects/composables/modelManagement.ts
index 18269a610..cbda91254 100644
--- a/packages/frontend-2/lib/projects/composables/modelManagement.ts
+++ b/packages/frontend-2/lib/projects/composables/modelManagement.ts
@@ -211,15 +211,18 @@ export function useProjectModelUpdateTracking(
   ) => void,
   options?: Partial<{ redirectToProjectOnModelDeletion: (modelId: string) => boolean }>
 ) {
+  const { hasLock } = useLock(
+    computed(() => `useProjectModelUpdateTracking-${unref(projectId)}`)
+  )
+  const isEnabled = computed(() => !!(hasLock.value || handler))
   const { onResult: onProjectModelUpdate } = useSubscription(
     onProjectModelsUpdateSubscription,
     () => ({
       id: unref(projectId)
-    })
-  )
-  const { hasLock } = useLock(
-    computed(() => `useProjectModelUpdateTracking-${unref(projectId)}`)
+    }),
+    { enabled: isEnabled }
   )
+
   const apollo = useApolloClient().client
   const evictProjectModels = useEvictProjectModelFields()
   const goToProject = useNavigateToProject()
@@ -326,17 +329,20 @@ export function useProjectPendingModelUpdateTracking(
     cache: ApolloCache<unknown>
   ) => void
 ) {
+  const { hasLock } = useLock(
+    computed(() => `useProjectPendingModelUpdateTracking-${unref(projectId)}`)
+  )
+  const isEnabled = computed(() => !!(hasLock.value || handler))
+
   const { onResult: onProjectPendingModelUpdate } = useSubscription(
     onProjectPendingModelsUpdatedSubscription,
     () => ({
       id: unref(projectId)
-    })
+    }),
+    { enabled: isEnabled }
   )
   const apollo = useApolloClient().client
   const { triggerNotification } = useGlobalToast()
-  const { hasLock } = useLock(
-    computed(() => `useProjectPendingModelUpdateTracking-${unref(projectId)}`)
-  )
 
   onProjectPendingModelUpdate((res) => {
     if (!res.data?.projectPendingModelsUpdated.id || !hasLock.value) return
diff --git a/packages/frontend-2/lib/projects/composables/projectManagement.ts b/packages/frontend-2/lib/projects/composables/projectManagement.ts
index 345e5ea23..d167a7ca0 100644
--- a/packages/frontend-2/lib/projects/composables/projectManagement.ts
+++ b/packages/frontend-2/lib/projects/composables/projectManagement.ts
@@ -56,11 +56,14 @@ export function useProjectUpdateTracking(
   const { hasLock } = useLock(
     computed(() => `useProjectUpdateTracking-${unref(projectId)}`)
   )
+  const isEnabled = computed(() => !!(hasLock.value || handler))
+
   const { onResult: onProjectUpdated } = useSubscription(
     onProjectUpdatedSubscription,
     () => ({
       id: unref(projectId)
-    })
+    }),
+    { enabled: isEnabled }
   )
 
   onProjectUpdated((res) => {
diff --git a/packages/frontend-2/lib/projects/composables/versionManagement.ts b/packages/frontend-2/lib/projects/composables/versionManagement.ts
index ab1c68ff2..bde5109b3 100644
--- a/packages/frontend-2/lib/projects/composables/versionManagement.ts
+++ b/packages/frontend-2/lib/projects/composables/versionManagement.ts
@@ -62,14 +62,17 @@ export function useProjectVersionUpdateTracking(
   const { silenceToast = false } = options || {}
   const apollo = useApolloClient().client
   const { triggerNotification } = useGlobalToast()
+
+  const { hasLock } = useLock(
+    computed(() => `useProjectVersionUpdateTracking-${unref(projectId)}`)
+  )
+  const isEnabled = computed(() => !!(hasLock.value || handler))
   const { onResult: onProjectVersionsUpdate } = useSubscription(
     onProjectVersionsUpdateSubscription,
     () => ({
       id: unref(projectId)
-    })
-  )
-  const { hasLock } = useLock(
-    computed(() => `useProjectVersionUpdateTracking-${unref(projectId)}`)
+    }),
+    { enabled: isEnabled }
   )
 
   // Cache updates that should only be invoked once
@@ -617,12 +620,15 @@ export function useProjectPendingVersionUpdateTracking(
   const { hasLock } = useLock(
     computed(() => `useProjectPendingVersionUpdateTracking-${unref(projectId)}`)
   )
+  const isEnabled = computed(() => !!(hasLock.value || handler))
   const { onResult: onProjectPendingVersionsUpdate } = useSubscription(
     onProjectPendingVersionsUpdatedSubscription,
     () => ({
       id: unref(projectId)
-    })
+    }),
+    { enabled: isEnabled }
   )
+
   const apollo = useApolloClient().client
   const { triggerNotification } = useGlobalToast()