Loading UI customization

[eluce2]

How much are we able to customize the yellow loading box that appears over the entire scheduler when we are loading data from a remote server? In my other experiments, I have seen a more subtle loading effect that is at the top of the screen and doesn't block the user scrolling left and right since we have vertical scrolling enabled.

Currently, the primary complaint from the client is that while using a magic mouse to scroll back in the timeline, they accidentally swipe "too far" and end up triggering the browser's back button. But we've noticed that this only happens because they run into a loading boundary of the infinite scroll. And when the loading box comes up, it prevents them from scrolling, allowing the swipe gesture to fall back to the browser or user's computer.

[ghulam.ghous]

Hi,

You can customize the loading mask by setting the loadMask config to null and then manually handling the loading state using the store's events. This way, you can create a more subtle loading indicator that doesn't block user interactions. Here's an example of how you can achieve this:

const scheduler = new Scheduler({
    loadMask: null, // Disable the default loading mask
listeners : {
    beforeLoad() {
        // Show your custom loading indicator
        scheduler.mask('Loading data....')
    },
    load() {
        // Hide your custom loading indicator
        scheduler.unmask()
    },
};
)}

Are you using lazyLoad? If yes then the yellow box (loading mask) should not show when loading data from backend on scroll. See here: https://bryntum.com/products/scheduler/examples/infinite-scroll/

https://bryntum.com/products/scheduler/docs/#Scheduler/crud/AbstractCrudManagerMixin#event-beforeLoad
https://bryntum.com/products/scheduler/docs/api/Scheduler/crud/AbstractCrudManagerMixin#event-load
https://bryntum.com/products/scheduler/docs/api/Core/widget/Widget#function-unmask
https://bryntum.com/products/scheduler/docs/api/Core/widget/Widget#function-mask

[eluce2]

Yes, I have lazyLoad configured on the project settings (and resource store), but I still see the yellow box all the time.

I tried your suggested method and it does make the yellow box go away, but then I get inconsistent behavior when scrolling really far back before a previous load is complete. It seems you are suggesting that I still "mask" the scheduler to prevent this, is that correct? But this would not get around the other problem with magic mouse gestures that I described. Rather than implementing my own loading spinner, I would be fine with the subtle green one that is in the infinite scroll example, but I don't understand the exact conditions that enable that behavior rather than the yellow box

[ghulam.ghous]

Well if you are using lazyLoad then the yellow mask shouldn't show, any chance we can get a small runnable test case to debug and inspect what is wrong? Because with lazy load we render a loading state skeleton in the cells being loaded and disable the loader automatically. And with lazy load, you don't need to manually manage it.

[eluce2]

Yes, you can actually see this behavior by scrolling left and right in this previous example that I made earlier for a different issue. Just make sure to change your network throttling to 3G in order to see the yellow box, otherwise it loads the static data too fast.

Also, to clarify, I do see the state skeleton when scrolling up and down, but not when scrolling left to right. I suspected this was because lazy load was only applied to the resource store, but when I tried applying lazy loads to the event store also, I still got the yellow box.

[ghulam.ghous]

Yes you are right, I believe you can set the loadMask to null so that loading indicator does not show. This is showing because you have configured the loadUrl on the project model. You are also right that we only show loading state when we load resources. I believe some improvements can be made related to not showing loadMask, when lazyLoad is configured. Moreover green line indicator is also not shown. I have opened a ticket here to investigate these issues. https://github.com/bryntum/support/issues/11129.

Can you please try with a real backend instead of json and confirm that if the issues persists for you?

[eluce2]

Yes, this is the exact same behavior with the real app that I'm building

[ghulam.ghous]

Thanks for letting us know, we will investigate it.