denwa-web-shared/skills/infinity-list/SKILL.md

A shared library for Next.js App Router projects containing reusable components, hooks, schemas, and utilities.

---
name: infinity-list
description: >
  Implement a continuous feed of items using InfinityList component.
  Load when implementing infinite scroll, lazy loading, or pagination lists.
type: core
library: denwa-web-shared
library_version: '1.0.58'
sources:
  - 'src/client/ui/infinity-list.tsx'
---

# denwa-web-shared — Implement infinite lists

## Setup

```tsx
import { InfinityList } from 'denwa-web-shared/client';

<InfinityList
  isNext={hasNextPage}
  onIntersection={fetchNextPage}
  intersectionElement={() => <div>Loading...</div>}
>
  {items.map((item) => (
    <Item key={item.id} {...item} />
  ))}
</InfinityList>;
```

## Core Patterns

### Infinite scroll list

```tsx
import { InfinityList } from 'denwa-web-shared/client';
import { Spinner } from '@/components/spinner';

export const Feed = ({ items, hasNext, loadMore }) => {
  return (
    <InfinityList
      isNext={hasNext}
      onIntersection={loadMore}
      intersectionElement={() => <Spinner />}
      intersectionElementClassName="py-4"
    >
      {items.map((item) => (
        <FeedItem key={item.id} data={item} />
      ))}
    </InfinityList>
  );
};
```

## Common Mistakes

### MEDIUM Incorrect handling of intersection triggers

Wrong:

```tsx
// Manual intersection observer implementation
```

Correct:

```tsx
import { InfinityList } from 'denwa-web-shared/client';

<InfinityList
  isNext={hasNextPage}
  onIntersection={fetchNextPage}
  intersectionElement={() => <Spinner />}
>
  {items}
</InfinityList>;
```

Agents might manually write intersection observers instead of using InfinityList.

Source: maintainer interview