i having error ResizeObserver loop completed with undelivered notifications [CustomizableHomepageGrid] when resizing the grid

[mohd-khan09]

import React, { useState } from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";
// Import your Chart component
import { ColBarChartComponent, StackedAreaChartComponent, MyLineChartComponent, VerticalComposedChartComponent } from './Charts/Chart';
const ResponsiveReactGridLayout = WidthProvider(Responsive);

const ReactGridLayout = () => {
const [layouts, setLayouts] = useState(null);
const [chartArray, setChartArray] = useState([
{ i: "chart1", x: 0, y: 0, w: 2, h: 2 },
{ i: "chart2", x: 2, y: 0, w: 2, h: 2 },
{ i: "chart3", x: 0, y: 2, w: 2, h: 2 },
{ i: "chart4", x: 2, y: 2, w: 2, h: 2 },
]);
const [selectedChartType, setSelectedChartType] = useState({
chart1: 'ColBarChart',
chart2: 'StackedAreaChart',
chart3: 'MyLineChart',
chart4: 'VerticalComposedChart',
});
// console.log(chartArray)
const handleModify = (layouts, layout) => {
setLayouts(layout);
const newChartArray = chartArray.map((chart) => {
const position = layouts.find((pos) => pos.i === chart.i);
if (position && (
chart.x !== position.x ||
chart.y !== position.y ||
chart.w !== position.w ||
chart.h !== position.h
)) {
return {
...chart,
x: position.x,
y: position.y,
w: position.w,
h: position.h,
};
}
return chart;
});
setChartArray(newChartArray);
};

return (

<ResponsiveReactGridLayout
onLayoutChange={handleModify}
layout={layouts}
// measureBeforeMount={true}
// verticalCompact={true}
// preventCollision={false}
// autoSize={false}
isDraggable
isRearrangeable
isResizable
cols={{ lg: 4, md: 4, sm: 2, xs: 2, xxs: 2 }}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
margin={{
lg: [20, 20],
md: [20, 20],
sm: [20, 20],
xs: [20, 20],
xxs: [20, 20],
}}
>
{chartArray?.map((chart, index) => {
let ChartComponent;
switch (selectedChartType[chart.i]) {
case 'ColBarChart':
ChartComponent = ColBarChartComponent;
break;
case 'StackedAreaChart':
ChartComponent = StackedAreaChartComponent;
break;
case 'MyLineChart':
ChartComponent = MyLineChartComponent;
break;
case 'VerticalComposedChart':
ChartComponent = VerticalComposedChartComponent;
break;
default:
ChartComponent = ColBarChartComponent;
}
return (
<div
className="flex flex-col transition-all duration-200 ease-in-out "
key={index}
data-grid={{
x: chart?.x,
y: chart?.y,
w: chart?.w,
h: chart?.h,
i: chart.i,
// minW: 2,
maxW: Infinity,
// minH: 2,
maxH: Infinity,
isDraggable: true,
isResizable: true,
}}
>
{/* <button
className="deleteButton"
onClick={() => handleDelete(chart.i)}
>
x
*/}

{selectedChartType[chart.i]}

<select
value={selectedChartType[chart.i]}
onChange={(e) =>
setSelectedChartType({
...selectedChartType,
[chart.i]: e.target.value,
})
}
>
ColBarChart
StackedAreaChart
MyLineChart
VerticalComposedChart

          <ChartComponent /> 
        </div>
      );
    })}
  </ResponsiveReactGridLayout>
</div>

);
};

export default ReactGridLayout;