Provide a prop to disable initial loading logic

[stalniy]

Currently infinite loading component calls scrollHandler in mounted hook. I want to run initial loading by myself and let infinite loading component to load items only when user scroll is at the bottom (or top).

Currently in my app I have 2 requests to server, instead of 1 (1 sent by me, another one by infinite loading component)

[baldoalessandro]

Hello, you may find useful the discuss at #141

[PeachScript]

Initialization load is required, because we should fill up the first screen then the user can scroll it.

If there has 2 or more requests, it means 1 page data cannot fill up screen and we must get more data to fill it.

If you want to keep 1 request, it is recommended increase the pageSize param to get more data through 1 request.

[PeachScript]

Duplicate with #141 that @baldoalessandro mentioned, this issue will be closed.

[stalniy]

Usually it’s better to control through some option. There may be additional logic which is required to load initial screen.

For example, get the page where user was after page refresh

[PeachScript]

@stalniy for some special cases, you can use v-if to control the initial load.

[stalniy]

Yes, I do v-if then load items as I need, then skip the first event from infinite loading because it attempts to load my items again in mounted hook

Very inconvenient.

I think you need to have 2 separate events. 1 which is called exactly when there is small distance to the edge and another which is called when component is mounted (or in both cases).

[PeachScript]

Emm...did you use page param to request data, like this:

<infinite-loading v-if="page" />
...
data() {
  return { page: 1 }
},
mounted() {
  this.loadData();
},
methods: {
  loadData($state) {
    ajax.then(() => {
      this.page += 1;
      $state.loaded();
    });
  }
}
...

If yes, where is the inconvenient point?

[stalniy]

It doesn't work as you suggest. Here is a working example:

example

<template>
  <div class="holder">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.title }}
      </li>
      <template v-if="isLoaded">
        <infinite-loading 
          v-if="page > 1"
          direction="top" 
          @infinite="loadPage(-1, $event)"
        />
        <infinite-loading 
          @infinite="loadPage(+1, $event)"
        />
      </template>
    </ul>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading';

const API_URL = '//hn.algolia.com/api/v1/search_by_date?tags=story';

export default {
  components: {
    InfiniteLoading,
  },
  data: () => ({
    items: [],
    isLoaded: false,
  }),
  computed: {
    page() {
      return Number(this.$route.query.page) || 1
    }
  },
  created() {
    return this.loadPage(0)
      .then(() => {
        // wait for items to render, 
        // so infinite scroll doesn't trigger additional requests
        this.$nextTick(() => {
          this.isLoaded = true
        })
      })
  },
  methods: {
    load(page) {
      return fetch(`${API_URL}&page=${this.page}`)
        .then(response => response.json())
    },
    loadPage(increment, $state) {
      console.log('called', increment)
      const page = this.page + increment
      return this.load(page)
        .then((data) => {
          const add = increment > 0 ? 'push' : 'unshift'
          this.items[add](...data.hits)
          this.resolveState(data, $state)
          if (page !== this.page) {
            this.$router.replace({ query: { page } })
          }
        })
    },
    resolveState(data, $state) {
      if (!$state) {
        return
      }

      if (data.hits.length) {
        $state.loaded()
      } else {
        $state.complete()
      }
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.holder {
  text-align: left;
}

li {
  padding: 20px 0;
}
</style>

The inconvinient part is that I need:

1. Add v-if around both infinite scroll components in order to skip intial load
2. I need to understand how Vue $nextTick works and wrap isLoaded = true in $nextTick call, otherwise items will not be in the DOM and 2 infinite-scrolls will emit 2 events which eventually triggers 2 additional requests

Doesn't look as a very clear and nice logic :)

I'd prefer to be more implicit and manually specify behavior (i.e., if I want to trigger event on creation, I say this)