LyteNyte Grid logo for light mode. Links back to the documentation home page.
Github repository for this project. 1771 Technologies home page
Server Data Loading

Optimistic Loading

Prefetch and optimistically load anticipated rows into the server data source to reduce loading indicators.

Optimistically Fetching Data Slices

Optimistic data loading predicts and preloads the data a user is likely to view next. Similar to prefetching linked pages to accelerate navigation, you can apply these techniques to load data slices.

Note

Optimistic loading is not a fixed sequence of functions. The best approach depends on your application and user interaction patterns. This guide’s demos show common use cases for optimistic loading with LyteNyte Grid.

The demo shows how to optimistically load slices in a flat data view. It tracks the current view and preloads the next slice when the view changes, helping the grid “stay ahead of the scroll.” Users may still see a loading indicator if they scroll faster than the next slice can load.

Optimistic Data Loading

Fork code on stack blitzFork code on code sandbox

In the demo, optimistic loading runs in a single useEffect hook, but it uses several parts of the server data source interface. The section below breaks down the full effect. For a complete list of methods, see the RowDataSourceServer reference.

const requests = ds.requestsForView.useValue();
useEffect(() => {
  // When the view changes, grab the next view value using the atom's get method.
  // Since this grid is flat, take the last item in the view.
  const view = requests.at(-1);
  if (!view) return;


  // Compute the next slice for this view. Returns null if the current view is the last one.
  const next = ds.requestForNextSlice(view);
  if (!next || ds.seenRequests.has(next.id)) return;


  // Mark this request as seen so the grid doesn’t refetch it when scrolled into view.
  // This step is optional but helps LyteNyte Grid track requested data.
  ds.seenRequests.add(next.id);


  // Push the new request into the grid. This triggers LyteNyte Grid to fetch the data.
  ds.pushRequests([next]);
}, [ds, requests]);

Multiple parts of the data source API interact to support optimistic loading. LyteNyte Grid’s API is intentionally low-level so you can tailor the behavior to your use case.

Optimistically Fetching Group Rows

You can optimistically fetch rows when row groups are present. By detecting when a user hovers over a group row, you can prefetch the group’s child rows before they expand it. See the demo below:

Optimistically Loading Group Rows

Row Groups
Education Level
Gender
Age
YoE
Fork code on stack blitzFork code on code sandbox

Preloading on hover is one approach. Other triggers include initial load or cell focus. Each approach anticipates row expansion and loads child data before the user requests it.

Preloading rows on hover is simpler than optimistic fetching on scroll:

<Grid
  rowSource={ds}
  columns={columns}
  rowGroupColumn={group}
  onColumnsChange={setColumns}
  events={useMemo<Grid.Events<GridSpec>>(() => {
    return {
      row: {
        mouseEnter: ({ layout: { rowIndex } }) => {
          const req = ds.requestForGroup(rowIndex);
          if (!req || ds.seenRequests.has(req.id)) return;


          // Let's load this
          ds.seenRequests.add(req.id);
          ds.pushRequests([req]);
        },
      },
    };
  }, [ds])}
  slotViewportOverlay={
    isLoading && (
      <div className="bg-ln-gray-20/40 absolute left-0 top-0 z-20 h-full w-full animate-pulse"></div>
    )
  }
/>

The code above uses another server data source method, requestForGroup. This method returns a DataRequest object that can be used to request the child rows of a group, allowing you to preload them in advance.

Next Steps