SKY UX 2 is the new version of Blackbaud’s user experience framework that implements Blackbaud design patterns. It extends the framework to abstract many complexities of modern web development and takes advantage of Angular 2 to increase the tooling, testing, and performance available.
Adding a SkyGridComponent to SKY UX 2 SPA should not trigger change detection with every mouse movement.
Actual behavior
Adding a SkyGridComponent to SKY UX 2 SPA causes change detection to be triggered with every mouse movement unnecessarily. This is due to a HostListener on the document:mousemove event. I believe that instead of using a HostListener, a listener for the mousemove event should only be added when the mousedown event is fired and removed when the mouseup event is fired.
Steps to reproduce
Add a SkyGridComponent to a SKY UX 2 SPA component.
Handle the AfterViewChecked hook in the component where the SkyGridComponent was added in the SPA and log the call to the console.
Serve a page containing the component.
Open the browser's development tools and view the console as you move the mouse on the page. There will be logs of the call to ngAfterViewChecked with every mouse movement.
Expected behavior
Adding a SkyGridComponent to SKY UX 2 SPA should not trigger change detection with every mouse movement.
Actual behavior
Adding a SkyGridComponent to SKY UX 2 SPA causes change detection to be triggered with every mouse movement unnecessarily. This is due to a HostListener on the
document:mousemove
event. I believe that instead of using a HostListener, a listener for themousemove
event should only be added when themousedown
event is fired and removed when themouseup
event is fired.Steps to reproduce
Add a SkyGridComponent to a SKY UX 2 SPA component.
Handle the
AfterViewChecked
hook in the component where the SkyGridComponent was added in the SPA and log the call to the console.Serve a page containing the component.
Open the browser's development tools and view the console as you move the mouse on the page. There will be logs of the call to
ngAfterViewChecked
with every mouse movement.Plunker
Plunker created from the Grid demo and adding a log of every time
ngAfterViewChecked
is called: https://plnkr.co/edit/kbwHhgB9EsKM0ZgfhaYu?p=previewSeverity
Medium
Impact
Could potentially cause performance issues.