Sketch widget tools take time to display mouse cursor when it gets activated first time

[BhavinSanghani]

I have written my code to initiate the Sketch tools following way.

When the tool gets activated first time on click of the button (it's in my application, not the Sketch widget button) then it downloads several small javascript files and the tool related mouse cursor(crosshair) doesn't appear on the map immediately. This behavior is noticeable if you throttle the speed in Chrome to Slow 3G. 

require(['esri/widgets/Sketch', 'esri/widgets/Sketch/SketchViewModel'], function(Sketch, SketchViewModel) {

var sketch = new Sketch({
           defaultCreateOptions: {
                mode: 'click'
           },
          layer: <graphic layer>,
          updateOnGraphicClick: false,
         view: mapView,
          viewModel: new SketchViewModel({
             pointSymbol: <pointSymbol>,
             polylineSymbol: <polylineSymbol>
         })
    });

      sketch.when(function(){
           sketch.create(<tool>); //tool is point or polyline
      });
});

Any idea on how to improve this performance or correct way to activate the tool so user doesn't require to wait?

[JoelBennett]

You could also require these modules when your application starts up, i.e. in the same call to require that includes your MapView:

require(["esri/Map", "esri/views/MapView", "esri/widgets/Sketch", "esri/widgets/Sketch/SketchViewModel"], function(Map, MapView, Sketch, SketchViewModel) {
	var map = new Map({
		//etc
	});

	//etc
});

That way, when your existing code executes, those modules will already be available on the client.

[BhavinSanghani]

@JoelBennett Thanks for replying. Map and MapView have already been initialized before I initialized Sketch widget in a separate function. So, they are already available on the client.

It is like when screen loads then 

function A(){

require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {

});

}

Then call function B on a separate button click.

function B() {

require(['esri/widgets/Sketch', 'esri/widgets/Sketch/SketchViewModel'], function(Sketch, SketchViewModel) {

var sketch = new Sketch({
           defaultCreateOptions: {
                mode: 'click'
           },
          layer: <graphic layer>,
          updateOnGraphicClick: false,
         view: mapView,
          viewModel: new SketchViewModel({
             pointSymbol: <pointSymbol>,
             polylineSymbol: <polylineSymbol>
         })
    });

      sketch.when(function(){
           sketch.create(<tool>); //tool is point or polyline
      });
});}

[JoelBennett]

Yes, but what I'm saying is that you should also include Sketch and SketchViewModel in the call to require in function A, even if you don't use them in function A.  That way, Sketch and SketchViewModel will already be available on the client by the time function B is called.  Otherwise function B executes, and then it has to wait until those modules download before the "real" execution takes place.

[BhavinSanghani]

Thanks @JoelBennett . I was thinking about it as a temporary fix. It looks like a workaround and I will try out. 

Is there any idea if this is a bug with the API?

[JoelBennett · Accepted solution]

No, this is not a bug.  It is by design that modules are not downloaded until they are imported via a call to "require" or "define".  Therefore, it makes sense to import the modules you need when the application is starting up.  It may make startup time a little bit longer, but the user expects some load time at the beginning.