VueEternalLoading falsy isInitial

by gavrashenko

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://unpkg.com/vue@3.2.25/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ts-pro/vue-eternal-loading/dist/vue-eternal-loading.umd.js"></script>

<div id="app">
  <div class="container">
    
    <div v-for="user in users" :key="user.id" class="card mb-3">
      <div class="row g-0">
        <div class="col">
          <img :src="user.avatar" class="rounded-start img-thumbnail m-1" alt="...">
        </div>
        <div class="col">
          <div class="card-body">
            <h5 class="card-title">{{ user.first_name }} {{ user.last_name }}</h5>
            <p class="card-text">Email: {{ user.email }}.</p>
          </div>
        </div>
      </div>
    </div>
    
    <vue-eternal-loading :load="load" :is-initial="false"></vue-eternal-loading>
    
  </div>
</div>

CSS

.vue-eternal-loading>div {
  margin: 10px;
  text-align: center;
}

JavaScript

const URL = 'https://reqres.in/api/users';
const PAGE_SIZE = 5;

const App = {
  data() {
    return {
      page: 99,
      // Preloaded data
      users: [
        {
            "id": 7,
            "email": "michael.lawson@reqres.in",
            "first_name": "Michael",
            "last_name": "Lawson",
            "avatar": "https://reqres.in/img/faces/7-image.jpg"
        },
        {
            "id": 8,
            "email": "lindsay.ferguson@reqres.in",
            "first_name": "Lindsay",
            "last_name": "Ferguson",
            "avatar": "https://reqres.in/img/faces/8-image.jpg"
        },
        {
            "id": 9,
            "email": "tobias.funke@reqres.in",
            "first_name": "Tobias",
            "last_name": "Funke",
            "avatar": "https://reqres.in/img/faces/9-image.jpg"
        },
        {
            "id": 10,
            "email": "byron.fields@reqres.in",
            "first_name": "Byron",
            "last_name": "Fields",
            "avatar": "https://reqres.in/img/faces/10-image.jpg"
        }
      ],
      isInitial: false,
    }
  },
  
  methods: {
    loadUsers(page) {
      return fetch( `${URL}?delay=1&page=${page}`)
        .then(res => res.json())
        .then(res => res.data);
    },

    load(action) {
      this.loadUsers(this.page).then((users) => {
        this.users.push(...users);
        this.page += 1;
        action.loaded(users.length, PAGE_SIZE);
      })
    }
  }
};

const app = Vue.createApp(App);
app.component('vue-eternal-loading', window.TSPro.VueEternalLoading);
app.mount('#app');