optimizing useLock composable & usages (#1886)

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
 

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(

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

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) => {

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()