I am creating a calendar user interface with AngularJS, and I am encountering quite large performance issues when looking through weeks. Let me explain.
The user interface looks something like this:
I iterate over all the faces, and then for each person that I scroll through the days, and then visualize the calendar objects for this user for that day. Something like this (simplified):
<div ng-repeat="user in ::ctrl.users track by user.id" class="row"> <div ng-repeat="day in ctrl.days" class="cell"> <div ng-repeat="item in ctrl.items[user.id][day] track by item.id"> <div class="item">
There are no crazy number of observers on this page (about 500), almost everything is connected once.
The problem is that the user presses the prev / next buttons to load the previous or next week. This changes the ctrl.days array to new days, and all the right items are loaded. This works great until you have a lot of people and calendar items. Then all the destructive and recreating elements of the DOM are very slow.
I came across the sly-repeat directive, which is designed to cache and reuse DOM elements, but since my external changes are ng-repeat (ctrl.days), the internal ng-repeat (with elements) is also recreated. So it does not work.
How can I solve this problem? Right now, viewing weeks with a large data set takes about 2 seconds, which, of course, is unacceptable. With a small set of users and calendar items, everything is very fast.
source share