Recursive load data with AlpineJS

load_recursive.js

const getItems = () => ({
  items: [],
  offset: 0,
  limit: 10,
  loading: false,
  hasMore: true,

  init() {
    this.loadItems();
  },

  loadItems() {
    if (this.loading || !this.hasMore) return;

    this.loading = true;

    axios.get('/api/v1/persons', {
        params: {
          offset: this.offset,
          limit: this.limit,
        },
      })
      .then((response) => {
        const data = response.data;
        this.items = this.items.concat(data.items);
        this.hasMore = data.has_more;
        this.offset += this.limit;

        if (this.hasMore) {
          // Add a slight delay before the next call
          setTimeout(() => this.loadItems(), 500);
        }
      })
      .catch((error) => {
        console.error('Error loading items:', error);
        this.hasMore = false; // Stop further recursive calls on error
      })
      .finally(() => {
        this.loading = false;
      });
  },
});