Component Patterns 3
← Components 2Infinite Scroll — Revealed Trigger
A sentinel element at the end of the list uses hx-trigger="revealed" to automatically load the next page when scrolled into view. 50 items total, 10 per page.
Post #1
htmxThis is feed item 1 demonstrating infinite scroll. Content loads automatically as you scroll down.
Post #2
goThis is feed item 2 demonstrating infinite scroll. Content loads automatically as you scroll down.
Post #3
templThis is feed item 3 demonstrating infinite scroll. Content loads automatically as you scroll down.
Post #4
daisyuiThis is feed item 4 demonstrating infinite scroll. Content loads automatically as you scroll down.
Post #5
hypermediaThis is feed item 5 demonstrating infinite scroll. Content loads automatically as you scroll down.
Post #6
htmxThis is feed item 6 demonstrating infinite scroll. Content loads automatically as you scroll down.
Post #7
goThis is feed item 7 demonstrating infinite scroll. Content loads automatically as you scroll down.
Post #8
templThis is feed item 8 demonstrating infinite scroll. Content loads automatically as you scroll down.
Post #9
daisyuiThis is feed item 9 demonstrating infinite scroll. Content loads automatically as you scroll down.
Post #10
hypermediaThis is feed item 10 demonstrating infinite scroll. Content loads automatically as you scroll down.
Optimistic UI — Immediate Feedback
Clicking the heart immediately toggles the visual state using HyperScript before the server responds. The server has an 800ms delay to make the pattern visible. If the server disagrees, the response reconciles the DOM.
Undo — Soft Delete with Toast
Deleting an item soft-deletes it and shows an undo toast. The Undo button POSTs to restore the item. The toast auto-dismisses after 5 seconds using HyperScript.
Infinite Scroll
GET /feed?page=NSentinel with hx-trigger="revealed" auto-loads the next page as user scrolls.
Optimistic UI
POST /favorite/:idHyperScript toggles state immediately; server response reconciles after 800ms.
Undo Delete
DELETE + POST /restoreSoft-delete returns an undo toast; restore POST swaps the item back in.