How do I render nodes in a layout on mount

[livid briar]

I want to layout my nodes, and I am using Dagre by following the docs, but I want this layouting on mount of my app, currently in docs there are two buttons to do this, can anyone help me with this

[frail bramble]

Something like this should work.

Boils down to this

const [init, setInit] = useState(false);
const nodesInit = useNodesInitialized();

useEffect(() => {
  if (nodesInit && !init) {
    window.requestAnimationFrame(() => {
      onLayout('TB');
      setInit(true);
    });
  }
}, [nodesInit]);

<ReactFlow
  nodes={nodes}
  edges={edges}
  onNodesChange={onNodesChange}
  onEdgesChange={onEdgesChange}
  style={{ opacity: init ? 1 : 0 }}  <-- prevents a shift when nodes aren't layouted yet
>