[ScrollArea] Initial state for hasOverflowX and hasOverflowY are true by default

[fseglard]

Hi everyone 👋!

I'm trying to implement the new ScrollArea component (which is working really great so far!) with some shadows to visually indicate the user that they can scroll the area (something like the shadow scrollbars of https://malte-wessel.github.io/react-custom-scrollbars/).

For that i'm using the hasOverflowX and hasOverflowY props from useScrollAreaContext to show/hide the shadows and I wanted to ask why these 2 props are true by default, on the initial render?

I'm asking this because it flickers the shadows when the container is not overflowing.

You can check the behavior here: https://stackblitz.com/edit/dyrfqqof?file=src%2FApp.tsx
I simply console.log the 2 props, you can see that hasOverflowX is true on the first render whereas the container is not overflowing on the x-axis. This is the same for hasOverflowY if we invert the axis.

[segunadebayo]

That's a good point. We should definitely consider making this false initially.