Infinite scrolling Polymer 3 and Fetch API

Question

Well firstly, tell me am I going down the right rabbit hole?

I am building a new PWA which will firstly be designed for Mobile,

I have built my back-end API and I am working on my front end. I am using Polymer 3 with a Vaadin-Grid at the moment.

What I am trying to do is get the list to infinitely scroll which should be quiet simple but I keep getting no where with examples.

Can anyone point me in the right direction?

    import { PolymerElement, html } from '@polymer/polymer/polymer- 
    element.js';
    import '@polymer/iron-ajax/iron-ajax.js';
    import '@vaadin/vaadin-grid/vaadin-grid.js';
import './shared-styles.js';

class MyView1 extends PolymerElement {

  static get template() {
return html`
  <style include="shared-styles">
    :host {
      display: block;

      padding: 10px;
    }
  </style>

  <div class="card">
    <div class="circle">

        </div>
    <h1>View One</h1>
     <vaadin-grid aria-label="Basic Binding Example" items="[[data]]">

  <vaadin-grid-column>
    <template class="header">RecordID</template>
    <template>[[item.recordID]]</template>
  </vaadin-grid-column>

  <vaadin-grid-column>
    <template class="header">File Ref</template>
    <template>[[item.fileRef]]</template>     
  </vaadin-grid-column>

<vaadin-grid-column>
    <template class="header">Description</template>
    <template>[[item.description]]</template>     
  </vaadin-grid-column>

</vaadin-grid> 

  </div>

`;
  }

connectedCallback(){
super.connectedCallback();
fetch('http://localhost:56132/api/matters')
.then(r => r.json())
.then(data => this.data = data);
}

}


window.customElements.define('my-view1', MyView1);

Answer 1

There's an example using vaadin-grid that populates the data from a callback (instead of setting all the items directly): https://vaadin.com/components/vaadin-grid/html-examples/grid-data-demos (check for the Assigning Remote/Function Data demo).

(Pasting the code from the example here, to make this answer more future-proof)

<x-remote-data-example></x-remote-data-example>
<dom-module id="x-remote-data-example">
  <template preserve-content>
    <vaadin-grid aria-label="Remote Data Example" data-provider="[[dataProvider]]" size="[[size]]">

      <vaadin-grid-column width="60px" flex-grow="0">
        <template class="header">#</template>
        <template>[[index]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column>
        <template class="header">First Name</template>
        <template>[[item.firstName]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column>
        <template class="header">Last Name</template>
        <template>[[item.lastName]]</template>
      </vaadin-grid-column>

    </vaadin-grid>
  </template>
  <script>
    window.addEventListener('WebComponentsReady', function() {
      Polymer({
        is: 'x-remote-data-example',

        ready: function() {
          this.size = 200;
          this.dataProvider = function(params, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
              callback(JSON.parse(xhr.responseText).result);
            };
            var index = params.page * params.pageSize;
            xhr.open('GET', 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize, true);
            xhr.send();
          };
        }

      });
    });
  </script>
</dom-module>

Basically you need to set the data-provider property, instead of using the items directly.

But keep in mind that you still need to know the total size of your dataset, as stated in the demo notes:

Note: the total number of items must be set to the grid. The example below sets the total number of items using the size property.