<!-- source-hash: 718cfa113d039df6d7ab2e0e2bb64de9 -->
Infinite-scroll footer component for `DataTable` that uses an `IntersectionObserver` sentinel to automatically trigger data loading when the user scrolls near the bottom of the table.

## Key Components

- **`DataTableInfiniteFooter`** — Main component that renders a 1px sentinel `<div>` and optional skeleton rows
- **`DataTableInfiniteFooterProps`** — Interface defining control props for pagination state and load behavior
- **Sentinel element** — A hidden `h-1` div observed by `IntersectionObserver`; fires `onLoadMore` when it enters the viewport
- **`DataTableSkeleton`** — Rendered during active fetch to provide loading feedback

## Usage Example

```typescript
import { DataTableInfiniteFooter } from './data-table-infinite-footer'

function MyTable() {
  const { data, hasNextPage, isFetchingNextPage, fetchNextPage } = useInfiniteQuery(...)

  return (
    <table>
      <tbody>
        {data.map(row => <tr key={row.id}>...</tr>)}
      </tbody>
      <DataTableInfiniteFooter
        hasNextPage={hasNextPage}
        isFetchingNextPage={isFetchingNextPage}
        onLoadMore={fetchNextPage}
        skeletonRows={5}
        rootMargin="300px"
      />
    </table>
  )
}
```

## Notes

| Prop | Default | Description |
|------|---------|-------------|
| `skeletonRows` | `3` | Number of skeleton rows shown while fetching |
| `rootMargin` | `'200px'` | `IntersectionObserver` margin, controls how early loading triggers |

- `onLoadMore` is stored in a ref to avoid stale closure issues in the observer callback
- The observer disconnects and re-attaches whenever `hasNextPage`, `isFetchingNextPage`, or `rootMargin` changes