Fix not expanding immediately

[hchangjae]

MR for the fix on content width not expanding immediately on drag.

Work is still underway

[junsikshim]

Maybe relying on the CSS width and height is the problem. We might have to insert the parent's dimension as a prop to the child pane system.

[hchangjae]

Noticed components with "splitter props" may be restricted from having auto size. Suggest adding validation logic or decoupling this correlation. Will address in a separate PR for clarity.

[hchangjae]

Maybe relying on the CSS width and height is the problem. We might have to insert the parent's dimension as a prop to the child pane system.

In SystemPane, isn't the asynchronous update of rowHeightPxs via useEffect, triggered by changes in the container size (even if received as props), causing potential synchronization issues? If the update cycle is delayed by one step due to useEffect, a similar issue might arise 🤔. (In this case, it seems that PaneRow might be the root cause of the issue. However, since it shares the same structure)

I'll check the mentioned point along with your observations.

[hchangjae]

Still experiencing the issue even after removing delays caused by useEffect.

[junsikshim]

Applying useLayoutEffect instead of useEffect is not working, so I suspect that the delay is coming from the time gap between Pane and the inner PaneSystem. The inner one is relying on the CSS width(100%), and it might need an extra frame to recalculate the pixels.

1. Pane resizes.
2. The browser expands the inner PaneSystem's width based on its value(100%).
3. The inner PaneSystem recalculates the actual pixel width.

The steps 1 through 3 should be done in one frame in order to be smooth, but I guess they're not.

[hchangjae]

I thought maintaining style changes through CSS might be necessary for PaneSystem to seamlessly blend with other components. However, would it be better if PaneSystem handles its styles only using its own settings?

[junsikshim]

I agree that PaneSystem benefits from using CSS as its style format, and the problem only exists when a PaneSystem is inside another PaneSystem. So I thought if a PaneSystem is a nested one, it could get the dimension from the parent Pane as props instead.

But this is only hypothetical, I'm not sure if this will solve the problem or not :)

[hchangjae]

Confirmed proper functionality by synchronizing timing with consistent width prop (as suggested). Ready to address changes for issue #11.

https://github.com/junsikshim/react-pane-system/assets/52942171/b8eb0aa7-0b97-4122-91a2-cca877c8c425

[junsikshim]

I'm currently working on #11 , so let's merge this first when it's ready.

[junsikshim]

It's ready to merge!