Syncing added events redraws multiple times

[chuckn0rris]

Forum post
To reproduce use this example
https://bryntum.com/products/schedulerpro/examples-scheduler/crudmanager/
And this code

import { SchedulerPro, WidgetHelper, Toast, EventModel } from '../../build/schedulerpro.module.js';
import shared from '../_shared/shared.module.js';
const cookie = 'PHPSESSID=schedulerpro-crudmanager';
if (!(document.cookie.includes(cookie))) {
    document.cookie = `${cookie}-${Math.random().toString(16).substring(2)}`;
}
const scheduler = new SchedulerPro({
    appendTo   : 'container',
    startDate  : new Date(2018, 4, 21, 6),
    endDate    : new Date(2018, 4, 21, 18),
    viewPreset : 'hourAndDay',
    rowHeight  : 50,
    barMargin  : 5,
    eventColor : 'orange',
    eventStyle : 'colored',
    // Sync mask is disabled, crud status is displayed in the toolbar.  When "b-sch-committing" class is supported by
    // CrudManager, special CSS style can be applied to event element to show syncing is in progress.
    // https://github.com/bryntum/support/issues/2720
    syncMask : null,
    loadMask : null,
    features : {
        // Configure event editor to display 'brand' as resource name
        eventEdit : {
            items : {
                resourceField : {
                    displayField : 'car'
                }
            }
        }
    },
    columns : [
        { text : 'Id', field : 'id', width : 100, editor : false, hidden : true },
        { text : 'Car', field : 'car', width : 150 },
        {
            type   : 'date',
            text   : 'Modified',
            field  : 'dt',
            width  : 90,
            format : 'HH:mm:ss',
            editor : false,
            hidden : true
        }
    ],
    project : {
        resourceStore : {
            // Add some custom fields
            fields : ['car', 'dt']
        },
        eventStore : {
            // Add a custom field and redefine durationUnit to default to hours
            fields : ['dt', { name : 'durationUnit', defaultValue : 'hour' }],
        },
        // This config enables response validation and dumping of found errors to the browser console.
        // It's meant to be used as a development stage helper only so please set it to false for production systems.
        validateResponse : true,
        transport : {
            load : {
                url       : 'php/read.php',
                paramName : 'data'
            },
            sync : {
                url : 'php/sync.php'
            }
        },
        autoLoad      : true,
        autoSync      : false,
        onRequestFail : (event) => {
            const
                { requestType, response } = event,
                serverMessage             = response && response.message,
                exceptionText             = `Action "${requestType}" failed. ${serverMessage ? ` Server response: ${serverMessage}` : ''}`;
            Toast.show({
                html    : exceptionText,
                color   : 'b-red',
                style   : 'color:white',
                timeout : 3000
            });
            console.error(exceptionText);
        }
    },
    tbar : [
        {
            type : 'button',
            ref  : 'reloadButton',
            icon : 'b-fa b-fa-sync',
            text : 'Reload scheduler',
            onAction() {
                scheduler.project.load()
                    .then(() => WidgetHelper.toast('Data reloaded'))
                    .catch(() => WidgetHelper.toast('Loading failed'));
            }
        },
        {
            type  : 'button',
            ref   : 'resetButton',
            color : 'b-red',
            icon  : 'b-fa b-fa-recycle',
            text  : 'Reset database',
            onAction() {
                scheduler.project.load({
                    // Adding a query string parameter "...&reset=1" to let server know that we want to reset the database
                    request : {
                        params : {
                            reset : 1
                        }
                    }
                })
                    .then(() => WidgetHelper.toast('Database was reset'))
                    .catch(() => WidgetHelper.toast('Database reset failed'));
            }
        },
		{
			type  : 'button',
			ref   : 'resetButton',
			text : 'create events',
			onAction: async () => {
				const firstEvent = scheduler.project.eventStore.first;
				const firstResource = scheduler.project.resourceStore.first;
                const events = [];
				for (let i = 0; i < 300; i++) {
					const name = 'test ' + i;
				  const newEvent = {name,  startDate: firstEvent.startDate, duration: 24, durationUnit: "h", resourceId: firstResource.id};
				  events.push(newEvent);
				}
                console.time('Adding events');
                scheduler.project.eventStore.add(events);
				await scheduler.project.commitAsync();
				console.timeEnd('Adding events');
			}
		},
		{
			type  : 'button',
			ref   : 'resetButton',
			text : 'Sync events',
			onAction: async () => {
				console.time('sync');
				await scheduler.project.sync()
				console.timeEnd('sync');
			}
		}
    ],
    bbar : [
        {
            type  : 'widget',
            ref   : 'crudStatus',
            width : 300,
            html  : ''
        }
    ]
});
const statusField = scheduler.widgetMap.crudStatus;
scheduler.project.on({
    beforeLoad() {
        statusField.html = 'Loading <i class="b-fa b-fa-spinner"></i>';
    },
    load() {
        statusField.html = 'Data loaded <i class="b-fa b-fa-check-circle"></i>';
    },
    loadFail() {
        statusField.html = 'Data loading failed! <i class="b-fa b-fa-times-circle"></i>';
    },
    beforeSync() {
        statusField.html = 'Saving <i class="b-fa b-fa-spinner"></i>';
    },
    sync() {
        statusField.html = 'Changes saved <i class="b-fa b-fa-check-circle"></i>';
    },
    syncFail() {
        statusField.html = 'Saving changes failed <i class="b-fa b-fa-times-circle"></i>';
    },
    hasChanges() {
        statusField.html = 'Data modified <i class="b-fa b-fa-user-edit"></i>';
    }
});

Click on "Create events"
Click on "Sync events"
See logs - sync take 15-20 seconds