adobe / adobe/react-spectrum

Table w/ Virtualizer partially renders in a weird state for a split second w/ Server Side components in react-aria-components

Open
#8,712 2 comments 0 reactions 0 assignees View on GitHub
bug ssr TableView Virtualizer
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

If you use a table with a Virtualizer in i.e. a Next.js app it renders partially with a weird layout before fully rendering.

This bug was introduced in the same PR as the my [last issue bug report](https://github.com/adobe/react-spectrum/pull/8320). The bug happens due to [this change](https://github.com/adobe/react-spectrum/commit/1bbd69c060039899c222c6ca97476752fed04a7b#diff-f9405406c2dc605226f231a1af6ab2a05f64a6c2f83ab9eaf3f2b8c7dd8b7ae2L197) in [this PR](https://github.com/adobe/react-spectrum/pull/8110).

[Here is a video of the bug](https://cap.so/s/s3vgb90mmvfd1z9)

### 🤔 Expected Behavior?

It should work how it worked prior to when that PR was merged, where either the table gets not rendered at all or fully rendered after everything is loaded. I think this PR was made to fix something else but ended up breaking this.

### 😯 Current Behavior

The table header first two columns gets rendered but without any space between and only the first column of the first row gets rendered for a split second before rendering normally.

### 💁 Possible Solution

Changing back
```js
let layoutInfos = this.layout.getVisibleLayoutInfos(rect);
```
to
```js
let layoutInfos = rect.area === 0 ? [] : this.layout.getVisibleLayoutInfos(rect);
```
in `getVisibleLayoutInfos()` in `@react-stately/virtualizer/src/Virtualizer.ts` fixes the issue. I'm not sure if this causes a regression somewhere else.

### 🔦 Context

We've been wanting to update our dependencies, including react-aria, but noticed this regression for our table views.

### 🖥️ Steps to Reproduce

[Minimal reproducer repository is available here](https://github.com/korri123/react-aria-issue)

```js
'use client'
import React from 'react'
import {
Label,
Table,
TableHeader,
Column,
TableBody,
Row, Cell, Virtualizer, TableLayout
} from 'react-aria-components';

export function TestComponent() {
return (



Selected


Name


Year


Age




ding


John


1998


27






)
}
```

### Version

1.11.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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.