[ANGULAR] Scheduler's loadMask listeners are not being called

[xminaya]

Hi,

Code sample is based on the following example: https://bryntum.com/products/scheduler/examples/infinite-scroll/

To replicate, turn on DevTool's network throttling to 3G in order to display load mask in the Scheduler during data load. Observe that the loadMask's listeners are not being called when the mask is shown/hidden.

Animation.gif (1.12 MiB) Viewed 85 times

import { Scheduler } from '../../build/scheduler.module.js?485313';
import shared from '../_shared/shared.module.js?485313';

const scheduler = new Scheduler({
    appendTo   : 'container',
    viewPreset : 'dayAndMonth',

// To center the view on a certain date
visibleDate : new Date(2024, 1, 6),

// Enables endless timeline scrolling
infiniteScroll  : true,
// The infiniteScroll gets a better UX if a larger bufferCoef is used. When using lazyLoading, this only means that
// the timeline "shifts" more seldom. Only events inside or close to the visible date range is requested from the
// backend
bufferCoef      : 20,
// Affects when the timespan shifts upon horizontal scroll
bufferThreshold : 0.01,

// Current backend easily runs out of memory, this prevents the requested date ranges from being too long
minZoomLevel : 11,

tickSize : 30,

selectionMode : { rowNumber : true },

features : {
    // Grouping is not supported when using a lazyLoad store
    group              : false,
    filter             : false,
    resourceTimeRanges : true
},

columns : [
    {
        text   : 'Name',
        field  : 'name',
        width  : 200,
        editor : {
            type     : 'textfield',
            required : true
        }
    }
],

resourceStore : {
    lazyLoad : true,
    // Uncomment these and comment out below to use the express.js backend
    // readUrl   : 'http://lh:3000/read-resources',
    // createUrl : 'http://lh:3000/create-resources',
    // deleteUrl : 'http://lh:3000/delete-resources',
    // updateUrl : 'http://lh:3000/update-resources',

    // Comment out these and uncomment above to use the express.js backend
    readUrl   : './php/resource/read.php',
    createUrl : './php/resource/create.php',
    deleteUrl : './php/resource/delete.php',
    updateUrl : './php/resource/update.php',

    autoLoad        : true,
    autoCommit      : true,
    sortParamName   : 'sort',
    filterParamName : 'filter'
},

eventStore : {
    lazyLoad : true,

    // Uncomment these and comment out below to use the express.js backend
    // readUrl   : 'http://localhost:3000/read-events',
    // createUrl : 'http://localhost:3000/create-events',
    // deleteUrl : 'http://localhost:3000/delete-events',
    // updateUrl : 'http://localhost:3000/update-events',

    // Comment out these and uncomment above to use the express.js backend
    readUrl   : './php/event/read.php',
    createUrl : './php/event/create.php',
    deleteUrl : './php/event/delete.php',
    updateUrl : './php/event/update.php',

    autoCommit : true,
    fields     : [{ name : 'duration', persist : false }]
},

resourceTimeRangeStore : {
    lazyLoad : true,

    // Uncomment this line and comment out below to use the express.js backend
    // readUrl : 'http://lh:3000/read-resourcetimeranges'
    readUrl : './php/resourcetimerange/read.php'
},

tbar : [
    {
        type : 'viewpresetcombo'
    },
    '->',
    {
        type : 'button',
        text : 'Reset data',
        icon : 'b-fa b-fa-refresh',
        ref  : 'resetButton',
        onClick() {
            // In addition to clearing all records, this will also remove any lazy loading cache on these stores
            scheduler.resourceStore.data = null;
            scheduler.eventStore.data = null;
            scheduler.resourceTimeRangeStore.data = null;
            // As the ResourceStore is an AjaxStore, calling load with a params object will include these parameters
            // in the lazy load server request.
            scheduler.resourceStore.load({ reset : true });
        }
    }
],

loadMask: {
    text: 'Hello World',
    listeners: {
        beforeShow: ({ source }) => console.log('beforeShow', source),
        beforeHide: ({ source }) => console.log('beforeHide', source),
        show: ({ source }) => console.log('show', source),
        hide: ({ source }) => console.log('hide', source),
    },
}
});

[marcio]

Hey xminaya,

Thanks for reaching out and for the detailed report.

The loadMask config in Bryntum Scheduler does not directly support event listeners like beforeShow or beforeHide. Instead, you should use the store events to manage the masking behavior.

You can listen to the beforeRequest and afterRequest events on the store to show and hide the mask. Here's an example of how you can implement this:

scheduler.resourceStore.on({
    beforeRequest() {
        scheduler.masked = { text: 'Loading...' };
    },
    afterRequest() {
        scheduler.masked = null;
    },
    exception({ response }) {
        scheduler.masked.error = response.message || 'Load failed';
    }
});

This approach will allow you to manage the mask visibility based on the store's loading state.

I created a ticket to check if the approach you're using is doable, please follow the updates here https://github.com/bryntum/support/issues/11362.

[xminaya]

Thanks marcio