feat(editor): ⚡️ Optimize graph navigation

apps/builder/layouts/results/AnalyticsContent.tsx

@@ -1,9 +1,9 @@
-import { Flex, useDisclosure } from '@chakra-ui/react'
+import { Flex, Spinner, useDisclosure } from '@chakra-ui/react'
 import { StatsCards } from 'components/analytics/StatsCards'
 import { Graph } from 'components/shared/Graph'
 import { useToast } from 'components/shared/hooks/useToast'
 import { UpgradeModal } from 'components/shared/modals/UpgradeModal'
-import { GraphProvider } from 'contexts/GraphContext'
+import { GraphProvider, GroupsCoordinatesProvider } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { Stats } from 'models'
 import React from 'react'
@@ -25,18 +25,29 @@ export const AnalyticsContent = ({ stats }: { stats?: Stats }) => {
       h="full"
       justifyContent="center"
     >
-      {publishedTypebot && answersCounts && stats && (
-        <GraphProvider groups={publishedTypebot?.groups ?? []} isReadOnly>
-          <Graph
-            flex="1"
-            typebot={publishedTypebot}
-            onUnlockProPlanClick={onOpen}
-            answersCounts={[
-              { ...answersCounts[0], totalAnswers: stats?.totalStarts },
-              ...answersCounts?.slice(1),
-            ]}
-          />
+      {publishedTypebot && answersCounts && stats ? (
+        <GraphProvider isReadOnly>
+          <GroupsCoordinatesProvider groups={publishedTypebot?.groups}>
+            <Graph
+              flex="1"
+              typebot={publishedTypebot}
+              onUnlockProPlanClick={onOpen}
+              answersCounts={[
+                { ...answersCounts[0], totalAnswers: stats?.totalStarts },
+                ...answersCounts?.slice(1),
+              ]}
+            />
+          </GroupsCoordinatesProvider>
         </GraphProvider>
+      ) : (
+        <Flex
+          justify="center"
+          align="center"
+          boxSize="full"
+          bgColor="rgba(255, 255, 255, 0.5)"
+        >
+          <Spinner color="gray" />
+        </Flex>
       )}
       <UpgradeModal onClose={onClose} isOpen={isOpen} />
       <StatsCards stats={stats} pos="absolute" top={10} />