[Masonry] Fix ResizeObserver loop limit exceeded error

[hbjORbj]

• I have followed (at least) the PR section of the contributing guide.

Closes #36909

Problem

• ResizeObserver loop limit exceeded error is thrown when dynamically updating masonry children or refreshing the browser.

Solution

• According to some research, this error occurred because ResizeObserver couldn't deliver all observations within a single animation frame. By wrapping it in requestAnimationFrame, we can limit the execution to a single frame.

Before

before.mov

After

after.mov

https://codesandbox.io/s/exciting-brattain-p010gm?file=/demo.tsx:0-1249

[mui-bot]

Netlify deploy preview

https://deploy-preview-37208--material-ui.netlify.app/

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against dd50f6b

[mnajdova]

Left just one comment for clarifying the need for the new line added.

[SanNic20]

@mnajdova : when will it be deployed?

[DiegoAndai]

@hbjORbj may we merge this one? 😊

[hbjORbj]

@SanNic20 This will be deployed on upcoming Monday.

[aakif-quayyum]

Was this implemented as I am still receiving the error (ResizeObserver loop limit exceeded)?

[DiegoAndai]

Hey @aakif-quayyum sorry for this, the error should be fixed in @mui/lab version 5.0.0-alpha.135. Could you try it out in that version and let me know if it's actually fixed?

[aakif-quayyum]

Yes, @DiegoAndai following the release of @mui/lab version 5.0.0-alpha.135 I no longer experieance this error, thanks a lot!

[kanon551]

Working Fine now Thanks Guys. npm install @mui/lab@5.0.0-alpha.135
I had similar issue, While i had pagination implemented. Everytime when i click on next page to render the cards this ResizeObser Loop exceded error occured. It was very frustating. Now its working fine