Now, we can implement logic to apply an effect for the big picture we have already displayed. Applying the effect to such a big picture takes some time, so I would like to implement a pre-loader to display it while it is processing. Here is the code I added in the app/LoadMask.js file:
Ext.define('Imaginary.LoadMask', {
extend: 'Ext.LoadMask',
xtype: 'loadmask',
config: {
message: '',
html: '<div class="loader">
<div class="item-1"><span></span></div>
<div class="item-2"><span></span></div>
<div class="item-3"><span></span></div>
<div class="item-4"><span></span></div>
<div class="item-5"><span></span></div>
<div class="item-6"><span></span></div>
</div>',
zIndex: 3000
}
});