Select to view content in your preferred language

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

571
5
Jump to solution
08-17-2023 07:08 AM
BhavinSanghani
Occasional Contributor II

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?

 

 

0 Kudos
1 Solution

Accepted Solutions
JoelBennett
MVP Regular Contributor

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.

View solution in original post

5 Replies
JoelBennett
MVP Regular Contributor

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.

0 Kudos
BhavinSanghani
Occasional Contributor II

@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
      });
});}


 

 

0 Kudos
JoelBennett
MVP Regular Contributor

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.

0 Kudos
BhavinSanghani
Occasional Contributor II

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?

0 Kudos
JoelBennett
MVP Regular Contributor

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.