berkayyildiz
commented
3 years ago Actually initialising light gallery outside angular solves triggering problem, I think this should be mentioned in the documentation. On the other hand listeners still seem unnecessary when gallery is close.
constructor(
private zone: NgZone
) {}
this.zone.runOutsideAngular(() => {
this.lightGallery = lightGallery(el, {
...settings,
})
})
Description
Regardless of using angular or typescript version, using the lightgallery in an angular project triggers change detection for every mousemove. Regardless of gallery is open or close mousemove listener triggers the change detection.
Steps to reproduce
Download Angular Dev Tools extenstion. Open an angular project with light gallery. Open angular dev tools, click to profiler and click to record. This can led performance issues.
Expected result
Change detection should only triggered couple of times for a basic action and couple of ten times for a complicated one.
Actual result
You will se that every mousemove triggers change detection.
Additional context
When I check source code there is only few mousemove listeners and none of them actually seem needed when gallery is close.
In actual library
hideBars() enableDrag() manageCloseGallery()On thumbnails plugin
enableThumbDrag()On zoom plugin
zoomDrag()Also it seem like every listener separately triggers change detection, for example the demo example use zoom plugin and with it there is total 4 listeners, in profiler you can see change detections sums with fours for every mouse move.
If it is possible I think this listeners should registered only when gallery is open.