Hi, I added Scheduler to my app but vertical scrolling in the scheduler is choppy. I noticed that if I remove all eventsData and my single column (type=tree), but leave the resourcesData in tact, the vertical scrolling performance is perfect. Note that all resourcesData and eventsData is currently local (test data, declared as a JSON object), and built eagerly (as opposed to lazily, long before being loaded into scheduler.crudManager.inlineData). All event and resource id's are strings containing UUID's. There is no custom rendering, all I did was set eventColor to pink. Here are relevant features/flags:
features: {
eventMenu: false,
scheduleMenu: false,
timeAxisHeaderMenu: false,
// Shade non-working days
nonWorkingTime : {
highlightWeekends: false,
},
// Turn off schedule tooltip to boost scrolling performance a bit
scheduleTooltip: false,
// Disabling sticky events speeds up scrolling a bit, since `position: sticky` promotes element to its own layer
stickyEvents : false,
timeRanges : {
enableResizing: false,
showHeaderElements : true,
showCurrentTimeLine : {
name : 'Now'
},
tooltipTemplate : ({ timeRange }) => timeRange.name
},
tree : true,
regionResize : false,
simpleEventEdit: false,
rowCopyPaste: false,
eventDrag: false,
eventResize: false,
eventEdit : false,
eventFilter: false,
eventDragCreate: false,
},
transitionDuration : 0,
// Turn off animations, to speed up the demo a bit since a lot will be on screen
useInitialAnimation : false,
enableEventAnimations : false,
// Don't track timeline context while scrolling, speeds up scrolling a bit by hitting DOM less
updateTimelineContextOnScroll : false,
// Disabling sticky headers speeds up scrolling a bit, since `position: sticky` promotes element to its own layer
stickyHeaders : false,
as well as some other properties:
this.scheduler.enableEventAnimations = false;
this.scheduler.eventColor = 'pink';
Lastly, lots of warnings in the browser console are printed when I scroll:
[Violation] 'requestAnimationFrame' handler took <N>ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 103ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 98ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 91ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 117ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 102ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 92ms
zone.js:2384 [Violation] 'requestAnimationFrame' handler took 124ms
I am running these versions:
angular 13
scheduler: 15.3.5
node: 16.16.0
I Profiled vertical scrolling in the Chrome DevTools and see multiple Long Tasks resulting in dropped frames. I notice that the long tasks contain lengthy rendering tasks (Animation Frame Fired, Recalculate Style, Layout, and Update Layer Tree)
Can someone please advise on how to work through this performance issue? I'm just about stumped. FYI my existing active enterprise license has Premium support. Thank you