Performance / too many ChangeDetections [ng-gallery < 8.0.0]

[lgaida]

I wanted to make my lightboxed images zoomable and used the zoom example from the wiki as a starting point. The result were indeed zoomable images but it was way too laggy to release it to end users. The more images the lightbox contains the laggier it gets.

I used the chrome dev tools performance profiler and found out that a single pixel pointermove was enough to trigger a reoccuring and cascading change detection cycle. Turns out that the change detection goes nuts after i open the lightbox. I verified that it has nothing to do with the integration of a zoomable image component but rather the lighbox itself.

What is the expected behavior?

Lightboxes and galleries should not cause unwanted change detection cycles.

What is the current behavior?

Too many change detection cycles caused by lightbox & gallery even if the parent components are using OnPush ChangeDetectionStrategy.

What are the steps to reproduce?

stackblitz https://stackblitz.com/edit/ngx-gallery-imageviewer-nqygln?file=src%2Fapp%2Fapp.module.ts

Which versions are you using for the following packages?

Stackblitz example Angular: 10.2.0 Angular CDK: 10.2.0 Angular CLI: 10.2.0 Typescript: 2.7.2 Gallery: 5.0.0

On my own project Angular: 15.2.9 Angular CDK: 15.2.9 Angular CLI: 15.2.9 Typescript:4.8.4 Gallery: 7.1.2 with --legacy-peer-deps

Is there anything else we should know?

I will try to reproduce it with multiple 'newer' versions of ng-gallery (8.0.0+), given i have only verified the issue on old versions of ng-gallery (5.0.0 and 7.1.2)

[lgaida]

After upgrading to 8.0.4 i still see a lot of change detections but at least way fewer than previously.

[MurhafSousli]

This can be due to the zoom module, try it without the plugin