Screen Freezes when using ExtJS TPL to create Template with Large DataSet

Question

I'm new to ExtJs and I'm using tpl to feel data in a component and the array has 18 thousands plus length so until the template is created my screen got stuck and I can't do anything. It is a way to perform this operation asynchronously so my screen and loading mask don't get stuck and template is created. Here's the code I'm using.

Ext.define('Ws.search.criteria.FullText', {
    extend: 'Ws.search.criteria.Base',
    xtype: 'criteria-fulltext',
    allowDragging: false,
    config: {
        data: null
    },
    layout: 'hbox',
    items: [
        {
            xtype: 'component',
            itemId: 'cmp',
            flex: 1,
            margin: '7 5 5 5',
            tpl: ['Full Text: (',
                '<tpl for="terms">',
                '<tpl if="xindex!=1">',
                '<span style="font-weight: bold; color: {[parent.isOr ? \"#e3ce2b\" :\" 
                 #119e0d\"]}"> {[parent.isOr?"OR": "AND"]} 
                 </span>',
                 '</tpl>',
                 '({.:htmlEncode})',
                 '</tpl>)'
                ]
            }
        ],
        listeners: {
            destroy: function () {
                this.fireEvent('fulltextframeremove');
            }
        },
    
        applyData: function (d) {
            var me = this,
                ct = me.down('#cmp');
            ct.setData(d);
            me.setBodyCls('builder-fulltext-criteria-' + (d.isOr ? 'yellow' : 'green'));
        },