I'm using cytoscape to dynamically create a network visualisation and I'm having trouble to setup the layout correctly. Occasionally, a collection of nodes is created and attached to a parent node. Then I call the following function to layout the new nodes and center the graph on that parent:

static DoLayout(node) {
    setTimeout(() => {
        cy.layout({
            name: 'cose',
            fit: false,
            nodeRepulsion: function (node) { return 99999; },
            componentSpacing: 100,
            padding: 100,
            randomize: false,
            animate: 'end',
            animationEasing: 'ease-in-out',
            animationDuration: 350,
            stop: () => {
                setTimeout(() => {
                    cy.zoom(.8)
                    cy.center(node);
                }, 100);
            }
        })
            .run();

    }, 50);

}

And here's the issue:

Is there a possibility to have these three actions layout, center and zoom happen at the same time? Or smoothly?

Edit: (fit: true,)

Setting fit to true, as suggested by canbax, solves the 'flickering' issue shown in the gif. However it still doesn't produce a smooth transition (animation?) when zooming and centering. Plus, I don't want the graph to be completely zoomed-out then zoomed-in and centered.