The q-infinite-scroll fire once or all, but not for each scroll

[mamcx]

This is a continuation of #135. I try to implement a partial load for a large list. With this layout:

<template id="ListCustomersPage">
<q-layout>
  <q-layout-header>
    <toolbar :title="title" :label="$t('New')"></toolbar>
    <q-search clearable inverted :placeholder="$t('Type Name, Code, Nit, Phone Number or Email')" :float-label="$t('Search')" v-model="search" autofocus=true></q-search>
  </q-layout-header>
    
  <q-layout-footer>
    <q-page-sticky expand position="bottom">
      <q-toolbar color="dark">
        <q-btn
            @click.native="$router.replace('/')"
            color="primary"
            icon="home"
        ></q-btn>
        <q-toolbar-title>
          <q-btn
            @click.native="loadMore()"
            color="secondary"
          >{{$t('Load More')}}</q-btn>
        </q-toolbar-title>
        <q-btn-dropdown
          color="primary"
          :label="$t('OrderBy')">
          <q-list link>
            <q-item v-for="option in ['name', 'code', 'city']" :key="option" v-close-overlay @click.native="doSearch(option)">
              <q-item-main>
                <q-item-tile label>{{ option }}</q-item-tile>
              </q-item-main>
            </q-item>
          </q-list>
        </q-btn-dropdown>
      </q-toolbar>
      <totaldebts :report="report" :total="total_debts" :opened='opened' :action="close"></totaldebts>
    </q-page-sticky>
  </q-layout-footer>
  
  <q-page-container> 
    <q-page>
      <q-infinite-scroll :handler="loadMore">

      <q-list highlight inset-separator>
        <q-item v-for="item in items" :key="item.customer_id">
          <q-item-side left>
            <q-btn @click.native="reportTotal(item.customer_code)" :color="colorDebt(item)" icon="attach_money">              
            </q-btn>
          </q-item-side>

          <q-item-main :label="item.name + ' - ' + item.customer_code" :sublabel="'Tel:' + item.phone1 + ' | ' + item.address + ' | ' + item.city"  @click.native="selectAction(item)"></q-item-main>
          <q-item-side right v-if="allowCustomer(item)" icon="chevron_right" color="primary"></q-item-side>
        </q-item>
      </q-list>
      <div class="row justify-center" style="margin-bottom: 50px;">
        <q-spinner-dots slot="message" :size="40" />
      </div>

      </q-infinite-scroll>
    </q-page> 
  </q-page-container>
</q-layout>
</template>

And the behavior is very strange. When inline is present, it load up to the end of the list (ie: Continue to call loadMore until is exhausted with done(true)). When not, it only fire once (when page load). It load enough data to fill the screen in first request.

Is not explained in the docs you need to put done(true) to stop more request. So, I have the logic for check if I get less items than requested to stop the method.

    loadMore(index, done) {
      console.log("LOAD MORE..", index);
      if (this.items.length > 0) {
        this.start = this.start + this.limit;
      } else {
        this.start = 0;
      }
      ....
      ....
      var query = {q: this.search, order: orderBy, start: this.start, limit: this.limit, done:done};

      this.store.dispatch('search', query);
    }

    actions:{
      search(orderBy, term){
        let done = term.done;
        delete term.done;

        console.log('SEARCH STORE: ', term););

        Api.search(context.state.url, term)
        .then(res => {
          console.log('SEARCH RES: ', res.length > 0);
          ....
          ....
          if (done) {
            done(res.length < term.limit);
            console.log('SEARCH DONE: ', done, res.length);
          }
        });
      }

[louisameline]

At the time I'm writing this, it's clear in the docs that done(true) will stop the component. It's also clear that inline has to be used if your scroll container is not the window. I'm not sure what your issue is here, what are you requesting?

[mamcx]

The problem is that with inline it load everything in one go. I can stop at the first load but then I don't get more data anymore.

What I'm expecting is that, if I have 1000 items and each slice is of 100:

1- Page show, load first slice.
2- Scroll to bottom, when approaching the end, request the next 100.
3- Repeat until I get less or equal than the size of a slice. If the condition is meet, stop requesting

[louisameline]

I can't see why it would load everything in one go. You control the ajax request, you should know how many items you load. Use console.log to understand how many calls to loadMore are done. I think there is no issue with the component here, you need to debug and come back with clearer details on what would be wrong.

[smolinari]

Not sure, but maybe this will help with you with figuring out the loading handler logic.

http://jsfiddle.net/smolinari/3f41720v/

Scott

[mamcx]

I can't see why it would load everything in one go.
Using inline, it keep repeating the loadMore until the end. But without inline not.

Put inline on

http://jsfiddle.net/smolinari/3f41720v/

and see how it keep loading data ad-infinitum. That is a weird behavior.

[louisameline]

You have to use inline when the scroll container is not the window. In other cases I'm not surprises to see "weird" behavior.

[mamcx]

The problem is that without inline is not requested more data after the first load.

[louisameline]

It seems to me that you need to close this issue and either spend more time debugging or ask for help in a forum. Issues here are for clear bug reports, which is unfortunately not the case here.