Removing canvas source with animate=true leaves map in render loop

[gpbmike]

mapbox-gl-js version: 39.1

Steps to Trigger Behavior

1. Add canvas source / layer (with default animate=true)
2. Remove canvas source / layer

Expected Behavior

Map should revert to state it was in prior to adding canvas source / layer initially.

Actual Behavior

Map is now in an infinite render loop and eating CPU.

Notes

This relates to a comment in another issue but I think warrants its own space.

In the following codepen, if you add and then remove a canvas layer, you can see that the map is stuck in a loaded = false state indefinitely. This is indicative of the infinite render loop mentioned in the linked comment above. If you want your CPU cycles back, you have to pause the canvas source before removing it. I think it should be auto-paused when being removed.

https://codepen.io/gpbmike/pen/prEMrX

[lbud]

Thanks for the report @gpbmike! If you have time, would you be interested in contributing a fix? The SourceCache class, which is responsible for managing all sources, already checks for an optional source.onRemove method, so it should be fairly straightforward to add a corresponding method to the CanvasSource class that cancels the animationLoop.

[gpbmike]

@lbud Would love to. Thanks for pointing me in the right direction.