title: How to display the graph after it is stabilized (vis.js)?
body: <p>I am rendering a graph using implementation of vis network as shown <a href="https://github.com/crubier/react-graph-vis" rel="nofollow noreferrer">here</a>. Right now the graph is taking some time to stabilize after being rendered. But I want the network to be stabilized before being displayed. I tried using the stabilization options under the physics module, but I could not achieve it. </p>
  
  <p>The following is my Graph Component.</p>
  
  <pre><code>import {default as React, Component} from 'react';
  import isEqual from 'lodash/isEqual';
  import differenceWith from 'lodash/differenceWith';
  import vis from 'vis';
  import uuid from 'uuid';
  import PropTypes from 'prop-types';
  
  class Graph extends Component {
    constructor(props) {
      super(props);
      const {identifier} = props;
      this.updateGraph = this.updateGraph.bind(this);
      this.state = {
        identifier : identifier !== undefined ? identifier : uuid.v4()
      };
    }
  
    componentDidMount() {
      this.edges = new vis.DataSet();
      this.edges.add(this.props.graph.edges);
      this.nodes = new vis.DataSet();
      this.nodes.add(this.props.graph.nodes);
      this.updateGraph();
    }
  
    shouldComponentUpdate(nextProps, nextState) {
      let nodesChange = !isEqual(this.nodes.get(), nextProps.graph.nodes);
      let edgesChange = !isEqual(this.edges.get(), nextProps.graph.edges);
      let optionsChange = !isEqual(this.props.options, nextProps.options);
      let eventsChange = !isEqual(this.props.events, nextProps.events);
  
      if (nodesChange) {
        const idIsEqual = (n1, n2) =&gt; n1.id === n2.id;
        const nodesRemoved = differenceWith(this.nodes.get(), nextProps.graph.nodes, idIsEqual);
        const nodesAdded = differenceWith(nextProps.graph.nodes, this.nodes.get(), idIsEqual);
        const nodesChanged = differenceWith(differenceWith(nextProps.graph.nodes, this.nodes.get(), isEqual), nodesAdded);
        this.patchNodes({nodesRemoved, nodesAdded, nodesChanged});
      }
  
      if (edgesChange) {
        const edgesRemoved = differenceWith(this.edges.get(), nextProps.graph.edges, isEqual);
        const edgesAdded = differenceWith(nextProps.graph.edges, this.edges.get(), isEqual);
        this.patchEdges({edgesRemoved, edgesAdded});
      }
  
      if (optionsChange) {
        this.Network.setOptions(nextProps.options);
      }
  
      if (eventsChange) {
        let events = this.props.events || {}
        for (let eventName of Object.keys(events))
          this.Network.off (eventName, events[eventName])
  
        events = nextProps.events || {}
        for (let eventName of Object.keys(events))
          this.Network.on (eventName, events[eventName])
      }
  
      return false;
    }
  
    componentDidUpdate() {
      this.updateGraph();
    }
  
    patchEdges({edgesRemoved, edgesAdded}) {
      this.edges.remove(edgesRemoved);
      this.edges.add(edgesAdded);
    }
  
    patchNodes({nodesRemoved, nodesAdded, nodesChanged}) {
      this.nodes.remove(nodesRemoved);
      this.nodes.add(nodesAdded);
      this.nodes.update(nodesChanged);
    }
  
    updateGraph() {
      let options = this.props.options;
  
      this.Network = new vis.Network(
              this.refs.nw,
        Object.assign(
          {},
          this.props.graph,
          {
            edges: this.edges,
            nodes: this.nodes
          }
        ),
        options
      );
  
  
      if (this.props.getNetwork) {
        this.props.getNetwork(this.Network)
      }
  
      // Add user provided events to network
      let events = this.props.events || {};
      for (let eventName of Object.keys(events)) {
        this.Network.on(eventName, events[eventName]);
      }
    }
  
    render(){
          return (&lt;div ref="nw" style={{width:'100%' , height: '480px'}}/&gt;);
      }
  }
  
  Graph.defaultProps = {
    graph: {},
    style: { width: '100%', height: '480px' }
  };
  Graph.propTypes = {
    graph: PropTypes.object,
    style: PropTypes.object,
    getNetwork: PropTypes.func
  };
  
  export default Graph;
  </code></pre>
  
  <p>This is my options object</p>
  
  <pre><code>let options = {
  layout: {
      hierarchical: false
  },
  autoResize: false,
  edges: {
    smooth: false,
    color: '#000000',
    width: 0.5,
    arrows: {
      to: {
        enabled: true,
        scaleFactor: 0.5
      }
    }
  }
  };
  </code></pre>
  
  <p>Any help would be greatly appreciated.
  Thanks in advance ! </p>