Рисование буфера не обновляет вид, пока не будет отпущена левая мышь

Question

Я пытаюсь нарисовать буфер в центре карты и обновить расположение буфера, когда карта перетаскивается, поэтому буфер всегда находится в центре карты, даже когда карта перетаскивается. Это работает, но вы можете видеть новые слои только когда мышь отпущена. Если вы закомментируете pointLayer.removeAll(); и buffLayer.removeAll(); Линии, вы можете видеть, что слои рисуются, просто не отображаются, пока не завершится событие перетаскивания.

Любая помощь или предложения приветствуются. Благодарю.

       require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/GraphicsLayer",
            "esri/Graphic",
            "esri/geometry/geometryEngine",
            "dojo/on",
            "dojo/dom",
            "dojo/domReady!"
        ], function (
            Map,
            MapView,
            GraphicsLayer,
            Graphic,
            geometryEngine,
            on, dom
        ) {
                //New Map
                var map = new Map({
                    basemap: "gray"
                });

                //New GraphicsLayer instances
                var buffLayer = new GraphicsLayer();
                var pointLayer = new GraphicsLayer();

                // Add them to the map 
                map.addMany([buffLayer, pointLayer]);

                //Start view in NM
                var viewOptions = {
                    map: map,
                    zoom: 7,
                    center: [-106, 34.2]
                };

                //New MapView instance
                var view = new MapView(viewOptions);

                //Put the view in the div id viewDiv
                view.container = "viewDiv";

                //Define the symbol(look) of the polygon part of the buffer
                var polyBuff = {
                    type: "simple-fill", outline: {
                        color: [0, 0, 0, 0.5],
                        width: 2
                    },
                    color: [111, 111, 111, 0.6]
                };

                //Define the symbol(look) of the center point of the buffer
                var pointBuff = {
                    type: "simple-marker",
                    outline: {
                        color: [255, 255, 0],
                        width: 1
                    },
                    color: [255, 0, 0],
                    size: 4
                };

                //This function is used to actualy create the buffer, and the new grapics to the existing GraphicsLayers
                function setcenterbuffer() {
                    //Create a buffer using the view centerpoint ass the geom.
                    var buffer = geometryEngine.geodesicBuffer(view.center, 20, "miles");
                    //Add new graphic to the bufffer layer
                    buffLayer.add(new Graphic({
                        geometry: buffer,
                        symbol: polyBuff
                    }));
                    //Add the new graphic to the point layer
                    pointLayer.add(new Graphic({
                        geometry: view.center,
                        symbol: pointBuff
                    }));
                    

                }
                //This is the initial creation of the buffer for when the page loads but no drag events yet.
                setcenterbuffer();

                //When the view is dragged...
                view.on("drag", drageventHandler);
                function drageventHandler(event) {
                    //Remove the exising layers...
                    pointLayer.removeAll();
                    buffLayer.removeAll();
                    //and set a new one
                    setcenterbuffer();
                }
            });

        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        .applicationDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #viewDiv {
            float: left;
        }

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Buffer problem</title>
 


    <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
    <script src="https://js.arcgis.com/4.6/"></script>


</head>

<body>
    <div class="applicationDiv" id="viewDiv"></div>
</body>