Preview note: This component loads content dynamically via fetch requests and works seamlessly with Turbo Frames. The states below are rendered statically to demonstrate the component's visual design.

Auto Mode (IntersectionObserver) — Loading State

1

Item 1

Loaded via IntersectionObserver as user scrolls

2

Item 2

Loaded via IntersectionObserver as user scrolls

3

Item 3

Loaded via IntersectionObserver as user scrolls

4

Item 4

Loaded via IntersectionObserver as user scrolls

5

Item 5

Loaded via IntersectionObserver as user scrolls

Loading more items...

Manual Mode (Load More Button)

1

Post 1

User clicks the button below to fetch more content

2

Post 2

User clicks the button below to fetch more content

3

Post 3

User clicks the button below to fetch more content

Ended State

1

Final item 1

All content has been loaded

2

Final item 2

All content has been loaded

3

Final item 3

All content has been loaded

You've reached the end