The performance of the grid layout is adversely affected when dealing with large SVG grid elements (size ≥ 1MB).

[Thao Quoc Huynh]

Describe the bug

When the size of an SVG grid element is approximately 1MB or more, dragging the element in the grid layout results in noticeable lag.
Besides that, the mouse cursor is offset from the dragging element (I guess the issue is the same #1975

Your Example Website or App

https://codesandbox.io/p/sandbox/cold-rain-q3829h

import { FunctionComponent } from "react";
import _ from "lodash";
import ReactGridLayout from "react-grid-layout";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";
import "./styles.css";
import { ReactComponent as SVG_Picture_1MB } from "./picture_1MB.svg";

interface Props {}

const DropDrag: FunctionComponent<Props> = (props) => {
  const layout = [
    {
      i: "chart1",
      x: 0,
      y: 6,
      w: 8,
      h: 8,
      minW: 4,
      minH: 2,
    },
    {
      i: "chart2",
      x: 8,
      y: 6,
      w: 4,
      h: 8,
      minW: 4,
      minH: 2,
    },
    {
      i: "card2",
      x: 4,
      y: 0,
      w: 4,
      h: 3,
      minW: 2,
    },
    {
      i: "card3",
      x: 8,
      y: 0,
      w: 4,
      h: 3,
      minW: 2,
    },
    {
      i: "card4",
      x: 0,
      y: 3,
      w: 4,
      h: 3,
      minW: 2,
    },
    {
      i: "card6",
      x: 8,
      y: 3,
      w: 4,
      h: 3,
      minW: 2,
    },
    {
      i: "table",
      x: 0,
      y: 14,
      w: 12,
      h: 9,
      minW: 4,
      minH: 3,
    },
    {
      i: "card1",
      x: 0,
      y: 0,
      w: 4,
      h: 3,
      minW: 2,
    },
    {
      i: "card5",
      x: 4,
      y: 3,
      w: 4,
      h: 3,
      minW: 2,
    },
  ];

  const onDrop = (layout: any, layoutItem: any, _ev: any) => {
    alert(
      `Element parameters:\n${JSON.stringify(
        layoutItem,
        ["x", "y", "w", "h"],
        2
      )}`
    );
  };

  const generateDOM = () => {
    return _.map(layout, function ({ i }) {
      return (
        <div
          key={i}
          style={{ background: "#ccc", height: "100%", width: "100%" }}
        >
          <SVG_Picture_1MB width="100%" height="100%" />
        </div>
      );
    });
  };

  return (
    <>
      <div
        className="droppable-element"
        draggable
        unselectable="on"
        onDragStart={(e) => e.dataTransfer.setData("text/plain", "")}
      >
        Droppable Element (Drag me!)
      </div>

      <ReactGridLayout
        width={1381.25}
        rowHeight={49.22}
        cols={12}
        layout={layout}
        isDroppable
        onDrop={onDrop}
        style={{ background: "#f0f0f0", width: 1381.25 }}
      >
        {generateDOM()}
      </ReactGridLayout>
    </>
  );
};

export default DropDrag;

Steps to Reproduce the Bug or Issue

1. Config a heavy SVG (~1MB) for all grid elements.
2. Drag any elements around.
3. Result:
   • Dragging is quite lag.
   • Mouse cursor is offset from the dragging element.

Expected behavior

• Drag performance should be better.
• The mouse cursor should accurately adjust the position of the dragging element.

react-grid-layout library version

1.4.4

Operating System Version

MacOS

Browser

Chrome

Additional context

In the create-react-app environment, there is more lag compared to CodeSandbox.

Screenshots or Videos

react-grid-layout.bad.performance.mov