Delay in Rendering 666 SVG Blocks on Canvas (JointJS v3.2.0)

[Kiran K]

Good afternoon,

We are currently working with a canvas implementation using JointJS version 3.2.0. On clicking a Render button, the canvas is expected to render 666 blocks. These blocks are implemented using SVG elements and are programmatically added to the canvas.

We observed that although the canvas eventually renders all 666 blocks, there is a noticeable delay after clicking the Render button. The rendering does not begin immediately when the button is clicked, and the blocks appear on the canvas only after a short lag.

Could you please let us know if this behavior is expected when rendering a large number of SVG blocks in JointJS? Additionally, we would like to understand if there is a permanent fix or recommended approach to avoid or significantly reduce this delay when rendering a large number of elements.

For your reference, we have attached a sample code snippet below that demonstrates our current implementation.

Any suggestions, best practices, or optimisation's that could help improve the rendering performance would be greatly appreciated.

codesandbox link - https://codesandbox.io/p/sandbox/joint-js-render-huge-block-wp72g5

Thanks

[Marek Hozák]

Hi Kiran, thanks for your question! 🙂 We're no longer maintaining this Google Group — we've moved community support to GitHub Discussions. Normally, I would direct you to post your question there, but I saw that you filled out the contact form on our website, so one of my colleagues from the technical team will reach out to you as soon as possible. 🙂

Thank you for your patience, and have a wonderful day! 🙂

Marek from JointJS