refactor(general): fit view in store to prevent flickering, rename onLoad => onPaneReady

example/src/Basic/index.tsx

@@ -7,7 +7,7 @@ import ReactFlow, {
   Controls,
   Node,
   Edge,
-  OnLoadParams,
+  ReactFlowInstance,
   Connection,
   MarkerType,
   useNodesState,
@@ -105,7 +105,7 @@ const nodeTypes = {
 };
 
 const BasicFlow = () => {
-  const [rfInstance, setRfInstance] = useState<OnLoadParams | null>(null);
+  const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
@@ -114,7 +114,7 @@ const BasicFlow = () => {
       return addEdge(connection, eds);
     });
   }, []);
-  const onLoad = useCallback((reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance), []);
+  const onPaneReady = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
 
   const updatePos = () => {
     setNodes((nds) => {
@@ -154,7 +154,7 @@ const BasicFlow = () => {
     <ReactFlow
       nodes={nodes}
       edges={edges}
-      onLoad={onLoad}
+      onPaneReady={onPaneReady}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onNodeClick={onNodeClick}
@@ -167,6 +167,7 @@ const BasicFlow = () => {
       maxZoom={4}
       onlyRenderVisibleElements={false}
       nodeTypes={nodeTypes}
+      fitViewOnInit
     >
       <MiniMap />
       <Controls />