docs: fitview mixing edges up on resize

docs/components/home/Home.vue

@@ -2,8 +2,6 @@
 import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
 import Blobity from 'blobity'
 import Intro from './flows/Intro.vue'
-import ArrowLeft from '~icons/carbon/arrow-left'
-import ArrowRight from '~icons/carbon/arrow-right'
 
 const dark = useDark({
   selector: 'html',

docs/components/home/flows/Intro.vue

@@ -42,10 +42,6 @@ const edgeId = ref('eintro-documentation')
 const el = templateRef<HTMLDivElement>('el', null)
 
 onPaneReady(({ fitView }) => {
-  fitView({
-    duration: 1500,
-  })
-
   const setNodes = () => {
     if (breakpoints.isSmaller('md')) {
       const mainNode = getNode.value('intro')!
@@ -69,6 +65,7 @@ onPaneReady(({ fitView }) => {
         }
       })
 
+      nextTick(() => {
         const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
           source: 'examples',
           target: 'documentation',
@@ -76,7 +73,16 @@ onPaneReady(({ fitView }) => {
           sourceHandle: null,
         })
         if (newEdge) edgeId.value = newEdge.id
+
+        fitView({
+          duration: 1500,
+        })
+      })
     } else {
+      fitView({
+        duration: 1500,
+      })
+
       getNodes.value.forEach((node) => {
         const mainNode = getNode.value('intro')!
         switch (node.id) {
@@ -95,6 +101,7 @@ onPaneReady(({ fitView }) => {
         }
       })
 
+      nextTick(() => {
         const newEdge = updateEdge(getEdge.value(edgeId.value)!, {
           source: 'intro',
           target: 'documentation',
@@ -102,6 +109,7 @@ onPaneReady(({ fitView }) => {
           sourceHandle: null,
         })
         if (newEdge) edgeId.value = newEdge.id
+      })
     }
 
     setTimeout(