[Masonry] Fix ResizeObserver loop limit exceeded error

[hbjORbj]

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

Closes https://github.com/mui/material-ui/issues/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

https://user-images.githubusercontent.com/32841130/236841383-a6028744-dbcf-48c6-bf23-5120024ec67f.mov

After

https://user-images.githubusercontent.com/32841130/236841366-aaaf9600-c0ef-41b9-b750-6ab1ab022625.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 :no_entry_sign: dangerJS against dd50f6b92a67b91eb36a3bb57a74a64b09a2bcbc

[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