ArcGIS JavaScript API: map loads after pan

Question

I'm using this.mapa.map.centerAndZoom(center, zoom); with 2 different zooms, 4 and 5.

    loadModules([
            'esri/geometry/Point',
        ]).then(([Point]) => {
            switch (evt.target.value) {
                case 'country_cl':
                    center = new Point([-70.71582015815409, -33.47133434146025]);
                    zoom = 4;
                    break;
                case 'country_co':
                    center = new Point([-73.63857136146157, 4.0920688808058]);
                    zoom = 5;
                    break;
                case 'country_mx':
                    center = new Point([-99.94867549215655, 20.55088183550196]);
                    zoom = 5;
                    break;
                }
            this.mapa.map.centerAndZoom(center, zoom);
        });

Chile has zoom 4, Colombia and Mexico has 5.

When I pan from Chile to Colombia or Mexico, the map gets blank, and it get loaded after the pan:

How can I load the map, with the new zoom (4 when comming from 5, and viceversa) before the centerAndZoom?

Answer 1

Edit :

first you zoom to the desired level, setZoom() is a deferred so when the function is done, you move the map to the location with centerAt()

var map = this.mapa.map;

switch (evt.target.value) {
  ...
}
map.setZoom(zoom).then(function(){
  map.centerAt(center);
});

Here is the jsfiddle updated