BUG: Drag Blocks to Canvas performance when you have 1000+ custom blocks

[jloguercio]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v96

Reproducible demo link

No demo

Describe the bug

How to reproduce the bug?

1. Add to Block manager more than 1000 blocks, in my case 7,864 font awesome icons.
2. Try to drag any block from block panel

Explanation

I added every font awesome pro icons as single block, use the below code, where jsonIcons is a json variable that contains all the 7,864 icons, i need to archieve this to drag and drop every icon of the list to the canvas

$.each(jsonIcons,function(index, value) {
        let fontAwesomeIcon = {
            category: 'Icons',
            label: value,
            media: '<em class="' + value + ' fa-4x"></em>',
            attributes: {
                class: "gjs-fonts"
            },
            content: '<i class="' + value + ' fa-2x"></i>',
            id: "fontAwesomeIcon" + index
        };
        editor.BlockManager.add(fontAwesomeIcon.id, fontAwesomeIcon);
    });

the main trouble is when i try to drag an icon block, the performance of the dragging events and drop the block are too slow, same for the green drop marker, how can i solve this issue? there is a way to improve the performance having a lot of blocks?

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[artf]

For your case, I'd suggest creating a custom block manager where you can adapt the UI for your blocks as you wish (eg. search, DOM virtualization, etc.)