plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.19k stars 1.03k forks source link

ResizeObserver loop completed with undelivered notifications #2555

Closed victor-pluta closed 5 months ago

victor-pluta commented 7 months ago

Describe/explain the bug Error "ResizeObserver loop completed with undelivered notifications" gets thrown when resizing the browser windows with nivo charts on it rapidly.

To Reproduce Create react app npm nivo charts and other packages needed to run create a page with some responsive* charts resize browser window rapidly and error appears.

Expected behavior error is shown

Screenshots image

Desktop (please complete the following information):

yan2441 commented 6 months ago

I faced the same problem. The difference is that each chart is set in individual resizable containers, and on first render or any resize of the container, it throws this error

yan2441 commented 6 months ago

update : the issue happen only on Responsive variant of charts also i think it has something to do with useMeasure hook, @plouc can u check this plz used lib versions node :21 typescript:4.9.4 react :17.0.2 react script : 5.0.1 @nivo/core : 0.85.1 @nivo/pie : 0.85.1 @nivo/line: 0.85.1

yan2441 commented 6 months ago

update : i found a workaround to make normal static chart responsive by wrapping chart with referenced div and listing to the changes as and passing width and height of the div as prams to the charts