Canvas performance degrades when an image has `base64` data in `src`

Describe the bug

Canvas interaction performance degrades when manipulating images that have base64 data in src

To Reproduce

Drag and drop an image into the canvas while logged out. This way, the image is not uploaded to the assets folder, but instead the image data is inserted as base64 into the src field of the newly created img.

Result: dragging around the img becomes noticeably slower

Expected behaviour

Performance stays the same

Screenshots

Profiling canvas interactions on an image with base64 data

[ruggi]

A bit more digging 🕵️‍♂️: it looks like the problem is in the parsing of large strings:

const Foo = () => {
  return <img src="data:image/png;base64,..." />
}

is crazy slow, but

const data = "data:image/png;base64,..."

const Foo = () => {
  return <img src={data} />
}

seems to be fine.

EDIT: mmh, actually probably the problem is still in the rendering, I’m getting different results now ¯_(ツ)_/¯

[ruggi]

As per the related discussion, closing this for now as a wontfix since the scope for the issue is only relevant when the img itself is dragged, not the container elements.