https://github.com/julianrubisch/sr-infinite-scroll-reflex

https://github.com/julianrubisch/sr-infinite-scroll-reflex

Last synced: 10 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/julianrubisch/sr-infinite-scroll-reflex
• Owner: julianrubisch
• License: mit
• Created: 2022-01-08T12:46:28.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-08T16:33:15.000Z (almost 3 years ago)
• Last Synced: 2024-12-12T14:35:00.395Z (15 days ago)
• Language: Ruby
• Size: 45.9 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
Successively add HTML fragments to the DOM on demand

**How?**

- CableReady is used to insert a new set of items using `insert_adjacent_html` before a `#sentinel` element after a "Load more" button is clicked.

- A scoped page morph is used to determine the next `page` and hides the "Load more" button when the last page is reached.

**Caveat**

Note that in a real-world app, you'd probably want to use model partials and collection rendering instead of inline rendering the items.

**Variations**

- Use a [Stimulus](https://stimulus.hotwire.dev) controller and an `IntersectionObserver` to automatically trigger loading:

```js

import ApplicationController from "./application_controller";

import { useIntersection } from "stimulus-use";

export default class extends ApplicationController {

  static targets = ["button"];

  connect() {

    super.connect();

    useIntersection(this, { element: this.buttonTarget });

  }

  appear() {

    this.buttonTarget.disabled = true;

    this.buttonTarget.innerHTML = '';

    this.stimulate("ArticlesInfiniteScroll#load_more", this.buttonTarget);

  }

}

```

- This example uses [Pagy](https://ddnexus.github.io/pagy/) for pagination, but of course you could also just use `.limit` and `.offset` or any other pagination method.