From 15f73fb4d5340b49b65402486ba27210ca701173 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 18 Dec 2022 18:39:57 +0100
Subject: [PATCH] fix(core): move watcher timing to pre and sync immediately

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/utils/watch.ts | 83 ++++++++++++--------------------
 1 file changed, 31 insertions(+), 52 deletions(-)

diff --git a/packages/core/src/utils/watch.ts b/packages/core/src/utils/watch.ts
index a070b061..54faeaf0 100644
--- a/packages/core/src/utils/watch.ts
+++ b/packages/core/src/utils/watch.ts
@@ -27,31 +27,26 @@ export const useWatch = (
 
               store.setElements(elements)
 
-              nextTick(() => {
-                pauseStore?.resume()
-              })
+              pauseStore?.resume()
             }
           },
           { immediate },
         )
 
-        nextTick(() => {
-          pauseStore = watchPausable(
-            [store.nodes, store.edges, () => store.edges.value.length, () => store.nodes.value.length],
-            ([nodes, edges]) => {
-              if (models.modelValue?.value && Array.isArray(models.modelValue.value)) {
-                pauseModel?.pause()
+        pauseStore = watchPausable(
+          [store.nodes, store.edges, () => store.edges.value.length, () => store.nodes.value.length],
+          ([nodes, edges]) => {
+            if (models.modelValue?.value && Array.isArray(models.modelValue.value)) {
+              pauseModel?.pause()
 
-                models.modelValue.value = [...nodes, ...edges]
+              models.modelValue.value = [...nodes, ...edges]
 
-                nextTick(() => {
-                  pauseModel?.resume()
-                })
-              }
-            },
-            { immediate },
-          )
-        })
+              nextTick(() => {
+                pauseModel?.resume()
+              })
+            }
+          },
+        )
 
         onScopeDispose(() => {
           pauseModel?.stop()
@@ -76,30 +71,22 @@ export const useWatch = (
 
               store.setNodes(nodes)
 
-              nextTick(() => {
-                pauseStore?.resume()
-              })
+              pauseStore?.resume()
             }
           },
           { immediate },
         )
 
-        nextTick(() => {
-          pauseStore = watchPausable(
-            [store.nodes, () => store.nodes.value.length],
-            ([nodes]) => {
-              if (models.nodes?.value && Array.isArray(models.nodes.value)) {
-                pauseModel?.pause()
+        pauseStore = watchPausable([store.nodes, () => store.nodes.value.length], ([nodes]) => {
+          if (models.nodes?.value && Array.isArray(models.nodes.value)) {
+            pauseModel?.pause()
 
-                models.nodes.value = [...nodes]
+            models.nodes.value = [...nodes]
 
-                nextTick(() => {
-                  pauseModel?.resume()
-                })
-              }
-            },
-            { immediate },
-          )
+            nextTick(() => {
+              pauseModel?.resume()
+            })
+          }
         })
 
         onScopeDispose(() => {
@@ -125,30 +112,22 @@ export const useWatch = (
 
               store.setEdges(edges)
 
-              nextTick(() => {
-                pauseStore?.resume()
-              })
+              pauseStore?.resume()
             }
           },
           { immediate },
         )
 
-        nextTick(() => {
-          pauseStore = watchPausable(
-            [store.edges, () => store.edges.value.length],
-            ([edges]) => {
-              if (models.edges?.value && Array.isArray(models.edges.value)) {
-                pauseModel?.pause()
+        pauseStore = watchPausable([store.edges, () => store.edges.value.length], ([edges]) => {
+          if (models.edges?.value && Array.isArray(models.edges.value)) {
+            pauseModel?.pause()
 
-                models.edges.value = [...edges]
+            models.edges.value = [...edges]
 
-                nextTick(() => {
-                  pauseModel?.resume()
-                })
-              }
-            },
-            { immediate },
-          )
+            nextTick(() => {
+              pauseModel?.resume()
+            })
+          }
         })
 
         onScopeDispose(() => {