feat: improve loading state

src/components/Graph/index.tsx

@@ -85,7 +85,6 @@ const GraphComponent = ({
         const MIN_SCALE = Math.round((450_000 / areaSize) * 100) / 100;
         const scale = MIN_SCALE > 2 ? 1 : MIN_SCALE <= 0 ? 0.1 : MIN_SCALE;
 
-        setLoading(true);
         setMinScale(scale);
         setSize({ width: layout.width + 400, height: layout.height + 400 });
 

src/components/MonacoEditor/index.tsx

@@ -50,7 +50,6 @@ export const MonacoEditor = ({
   React.useEffect(() => {
     const { nodes, edges } = parser(json, expand);
 
-    setGraphValue("loading", true);
     setGraphValue("nodes", nodes);
     setGraphValue("edges", edges);
     setValue(json);

src/hooks/store/useGraph.tsx

@@ -31,6 +31,7 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
       collapsedParents: [],
       collapsedNodes: [],
       collapsedEdges: [],
+      loading: true,
       [key]: value,
     }),
   setLoading: loading => set({ loading }),
@@ -43,14 +44,17 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
     );
     const childrenEdges = getChildrenEdges(childrenNodes, get().edges);
 
-
     let nodesConnectedToParent = childrenEdges.reduce((nodes: string[], edge) => {
-      edge.from && !nodes.includes(edge.from) && nodes.push(edge.from)
-      edge.to && !nodes.includes(edge.to) && nodes.push(edge.to)
-      return nodes
+      edge.from && !nodes.includes(edge.from) && nodes.push(edge.from);
+      edge.to && !nodes.includes(edge.to) && nodes.push(edge.to);
+      return nodes;
     }, []);
-    const matchingNodesConnectedToParent = matchingNodes.filter(node => nodesConnectedToParent.includes(node));
-    const nodeIds = childrenNodes.map(node => node.id).concat(matchingNodesConnectedToParent);
+    const matchingNodesConnectedToParent = matchingNodes.filter(node =>
+      nodesConnectedToParent.includes(node)
+    );
+    const nodeIds = childrenNodes
+      .map(node => node.id)
+      .concat(matchingNodesConnectedToParent);
     const edgeIds = childrenEdges.map(edge => edge.id);
 
     const collapsedParents = get().collapsedParents.filter(cp => cp !== nodeId);