Trying to incorporate a responsive API (react-grid-layout, v1.4.4) within a single Tab of Mantine (v7.8.1 in the Sandbox) and be able to switch between Tabs without requiring a redraw and in this case a re-calculation of the RGL layout.
Intended behavior is that switching tabs would keep the old tab mounted and upon return to that tab have it already rendered and ready to display.
There is a default flag in Mantine keepmounted that is available for the Tabs, but doesn't seem to work with, at least this, responsive API... obviously this could be a RGL issue as well (or lack of understanding of either). I'm assuming the fix might actually be within RGL to somehow restrict its "onChanging" behavior.
I've create a Sandbox to demonstrate:mantine react-grid-layout Codesandbox
In the sandbox, I created 3 tabs and under the last tab "Settings" I added a ResponsiveReactGridLayout shell (doesn't actually show any grid - not important to demonstrate the behavior).
Within the ResponsiveReactGridLayout, there is console.log of width whenever the layout width is changed.
onWidthChange={(width) => { console.log(width);}}This shows the width print out on the console whenever it changes.
When the tab is switched away from the RGL tab, settings, the width of the layout goes to 0; returning to its normal width when the tab is reselected. This behavior causes the RGL layout to be changed to the smallest layout and then (eventually) return to the desired layout with the correct width.
Unfortunately this is only done after the tab is selected and already displaying the 0-width or smallest layout, causing an obvious re-render of the tab (or in most cases, an obvious "jump" from a single column to a multi-column layout).
