Table lazy load not working for the infinite scroll

[gauravmakkar]

It seems table lazy load works only for the case where table height is fixed and page size is lesser than some percentage. I tried with page size< 20 and table height=500px, and lazy load didn't work. It somehow worked if I increase the page size>=25. Ideally, it should support both cases, 1. Infinite scroll, i.e, the table with variable height and 2. page size of any length.

[snowystinger]

As a workaround for now, you might want to programmatically check the height on your table and then choose the page size based on that. Table is still being worked on, so hopefully this is a temporary suggestion.

[jluyau]

Codepen: https://codesandbox.io/s/admiring-mccarthy-vfdi3?fontsize=14&hidenavigation=1&theme=dark

Steps:

1. see that at limit = 25, scrolling to a point near the bottom will trigger the loadMore function (rows may not render correctly but at least the items are there to be rendered)
2. see that at limit = 15, scrolling to the bottom does not trigger loadMore

in the case the codepen permalink gets borked, sample code here:

import React from "react";
import { defaultTheme, Provider, useAsyncList } from "@adobe/react-spectrum";
import {
  Table,
  Row,
  Cell,
  Column,
  TableBody,
  TableHeader
} from "@react-spectrum/table";
import "./styles.css";

function generateNItems(num, start = 0) {
  return [...Array(num)].map((_, i) => {
    const index = start + i;
    return { key: "" + index, name: `Item ${index}` };
  });
}

// NOTE: CHANGE LIMIT TO 15 AND NOTE THAT SCROLLING TO BOTTOM DOES NOT TRIGGER LOAD MORE
//
// NOTE 2: there's a weird rendering issue where additional rows aren't being rendered but
//         the import thing is loadMore being (not) called
const limit = 25;
export default function App() {
  const list = useAsyncList({
    getKey: (item) => item.key,
    load: async ({ cursor }) => {
      // console.log('cursor', cursor)
      // console.log('items',  generateNItems(limit, cursor))
      await new Promise((resolve) => setTimeout(resolve, 250));
      return {
        items: generateNItems(limit, cursor),
        cursor: cursor ? cursor + limit : limit
      };
    }
  });
  console.log("items", list.items);
  return (
    <div className="App">
      <Provider theme={defaultTheme}>
        <Table height="500px">
          <TableHeader>
            <Column key="name">column</Column>
          </TableHeader>
          <TableBody
            items={list.items}
            isLoading={list.isLoading}
            onLoadMore={list.loadMore}
          >
            {(item) => (
              <Row key={item.key}>
                {(column) => {
                  return <Cell>{item[column]}</Cell>;
                }}
              </Row>
            )}
          </TableBody>
        </Table>
      </Provider>
    </div>
  );
}

[snowystinger]

related? #1154

[jluyau]

Hmm I don't think so. Doesn't look like that example has infinite scrolling set up?

[devongovett]

Relevant code is here:

react-spectrum/packages/@react-spectrum/table/src/Table.tsx

Lines 324 to 329 in 0707851

	if (!collection.body.props.isLoading && collection.body.props.onLoadMore && state.virtualizer.contentSize.height > rect.height * 2) {
	let scrollOffset = state.virtualizer.contentSize.height - rect.height * 2;
	if (rect.y > scrollOffset) {
	collection.body.props.onLoadMore();
	}
	}

We should make it match the default code in Virtualizer (e.g. used in ListBox):

react-spectrum/packages/@react-aria/virtualizer/src/Virtualizer.tsx

Lines 78 to 83 in 0707851

	if (!isLoading && onLoadMore) {
	let scrollOffset = state.virtualizer.contentSize.height - rect.height * 2;
	if (rect.y > scrollOffset) {
	onLoadMore();
	}
	}

(note the extra if condition on the first one).

However, be aware that this will mean if you don't have enough items on initial load to fill the screen, it will immediately try to load more.