ResizableTableContainer can have "layout flash" on initial render and refresh
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
ResizableTableContainer seems to cause a "layout flash" on initial render and refresh if the width of the table is wider than the minimum widths of all its columns.
This is reproducible using the Stock Table example alone in a web page: https://react-spectrum.adobe.com/react-aria/examples/stock-table.html
### 🤔 Expected Behavior?
Resizable tables should not have a "layout flash" on initial render and refresh.
### 😯 Current Behavior
Resizable tables can have a "layout flash" on initial render and refresh.
### 💁 Possible Solution
_No response_
### 🔦 Context
Impacts JustD: https://github.com/irsyadadl/justd/issues/247
### 🖥️ Steps to Reproduce
- Render the Stock Table Example (https://react-spectrum.adobe.com/react-aria/examples/stock-table.html) in a web page that is wider than the minimum widths of all the columns.
- Initial render has "layout flash"
- Refreshing page results in "layout flash"
CodeSandbox: https://codesandbox.io/p/github/mw10013/rr-rac-resizable-table-container/main
StackBlitz: https://stackblitz.com/~/github.com/mw10013/rr-rac-resizable-table-container?file=app/components/StockTableExample.tsx
NB: Enlarge the preview pane so that it is wider than the minimum widths of all the table columns. Refreshing the preview pane will cause a "layout flash" in the first two tables.
The reproduction shows 3 tables:
- Stock table example
- Stock table example with `min-w-full` on the table.
- Stock table example with `min-w-full` on the table and no `defaultWidth`'s. There is no "layout flash" with this one.
### Version
1.5.0
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
_No response_
### What operating system are you using?
MacOS
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.