From 22accaed0d851ebb34b97a1d045d93b4ac98a86e Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 1 Apr 2023 17:26:00 +0200
Subject: [PATCH] fix(core): hide transformation pane to avoid flickering of
 graph

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/container/Viewport/Transform.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/container/Viewport/Transform.vue b/packages/core/src/container/Viewport/Transform.vue
index 098fad0e..6d7738e1 100644
--- a/packages/core/src/container/Viewport/Transform.vue
+++ b/packages/core/src/container/Viewport/Transform.vue
@@ -1,9 +1,12 @@
 <script lang="ts" setup>
+import { isClient } from '@vueuse/core'
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 
 const { id, viewport, emits, d3Zoom, d3Selection, dimensions, ...rest } = useVueFlow()
 
+const viewportReady = ref(!isClient)
+
 until(() => d3Zoom.value && d3Selection.value && dimensions.value.width > 0 && dimensions.value.height > 0)
   .toBeTruthy()
   .then(() => {
@@ -17,6 +20,10 @@ until(() => d3Zoom.value && d3Selection.value && dimensions.value.width > 0 && d
       dimensions,
       ...rest,
     })
+
+    setTimeout(() => {
+      viewportReady.value = true
+    }, 0)
   })
 </script>
 
@@ -31,7 +38,10 @@ export default {
   <div
     :key="`transform-${id}`"
     class="vue-flow__transformationpane vue-flow__container"
-    :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})` }"
+    :style="{
+      transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`,
+      opacity: viewportReady ? undefined : 0,
+    }"
   >
     <EdgeRenderer />