BUG: Performance issue while dragging component to canvas when you have 2k component on canvas

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Google Chrome Version 101.0.4951.41 (Official Build) (64-bit)

Reproducible demo link

https://jsfiddle.net/Laze0pyg/

Describe the bug

How to reproduce the bug?

1. Add 2k components using the below script.
2. for(let i = 0;i<2000;i++) editor.addComponents('<div>ABC</div>');
3. Try dragging Text Block on to the canvas.

What is the expected behavior? There should be no lag.

What is the current behavior? The green line placeholder is lagging

JS Fiddle https://jsfiddle.net/Laze0pyg/

Demo

https://user-images.githubusercontent.com/100282281/168098195-9b69c333-df8b-43e0-bd64-4f7bee004b48.mp4

Code of Conduct

• I agree to follow this project’s Code of Conduct

[GedMarc]

but… add 2000 dom elements with any basic styling to any page and you’ll get lag? that might not be the tool, but how the tool is being used?

also check your browser render speed in relation to your pc - http://speed-battle.com/speedtest_e.php

https://www.webfx.com/web-development/learn/why-does-your-website-load-slowly/

In 2015, the average page size was 2MB. That increased in 2016 to 2.3MB. And by 2017, it’s projected to increase to 3MB. But what do those MBs hold?

Your page size is impacted by the images, scripts, HTML, stylesheets, videos, and other elements you may have on a page.

When you have more elements on your page, the page loads more slowly, which can result in a slow website overall if all the pages load like snails.

Solution: Decrease elements per page To decrease the load on your website, decrease the size and quantity of elements on a page.

Consider whether you can achieve your desired effect with fewer photos, videos, or elements overall. I (If you haven’t optimized your images yet, this would be the time!)

If you don’t know whether you have too many elements, perform a heat map test on your website to see what users are viewing and clicking.

For example, if you have a whole page full of your company’s YouTube videos, but the heat map shows that only a quarter are getting clicks, consider removing the videos that aren’t being viewed.

[lexoyo]

Hi that would be great to optimize this 👍

I would suggest to use the browser’s performance tool, but you probably know this

Thank you for looking into this @mohdSuhailCoditation