Aurelia for.repeat wait spinner

Question

I have a really simple test case when I get a large list of Json entries that talk about 2000 elements. I just want to display all of these elements on one page. (Forget whether this is a good design or not).

I have a standard spinner specified in my index.html, which is displayed when the page loads and page changes. However, the counter stops and the page is displayed until the for.repeat loop completes.

What is the best way to handle this. I tried adding a new spinner to this page only for.repeat, but there seems to be no way to find out when the loop ends. I tried using TaskQueue without success. I could use setTimeout as a dirty hack, but I would like to know the right way to handle this.

thank

Answer 1

I am sure this will work:

export class LongDataList {

  constructor() {
    // start the spinner
    this.bindingSpinner = 1;
  }

  attached() {
    // stop the spinner
    this.bindingSpinner = 0;
  }

}

And in your template something like this:

<template>

  <!-- spinner -->
  <span if.bind="bindingSpinner">
    <i class="fa fa-spinner fa-spin fa-lg"></i>
  </span>

  <!-- List of records -->
  <table>
    <thead>
      <tr>
        <th>Username</th>
        <th>Password</th>
        <th>First name</th>
        <th>Last name</th>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="record of records">
        <td>${record.user_username}</td>
        <td>${record.user_password}</td>
        <td>${record.p_fname}</td>
        <td>${record.p_lname}</td>
      </tr>
    </tbody>
  </table>

</template>

Finally, if you want the spinner to appear in another module, you can associate the property with the parent component:

<long-data-list binding-spinner.bind="parent-binding-spinner"></long-data-list>

Or you can use Aurelia eventAggregatorto report events to start and stop the counter. However, the first one is simpler.

Answer 2

Gist @LStarky, , spinner.

, , , , . . :

https://gist.run/?id=75d5ba1e321a918ee16366f7c2c4d0f2

:

export class App {
  bindingSpinner = 1;
  data = [];

  attached() {
    this.bindingSpinner = 1;
    fetch('https://jsonplaceholder.typicode.com/photos').then(response => {
      // stop the spinner
       return response.json()
    }).then(data => {
      this.data = data;
      this.bindingSpinner = 0;
    });
  }
}

Answer 3

activate() . activate(), . :

activate() {
  return new Promise((res, rej) => {
    this.items = 50000;
    res();
  });
}

https://gist.run/?id=eb239baf7255bfe1c613be1dbbe44939

Answer 4

It looks like your problem may be that rendering the list items takes too much time. When working with really long lists, for example, you can take advantage of virtualization using aurelia-ui-virtualization .

Install the package through JSPM

jspm install aurelia-ui-virtualization

Download package:

aurelia.use
  .standardConfiguration()
  .plugin('aurelia-ui-virtualization');

and just replace the binding repeat.forwith virtual-repeat.for. The actual page rendering should now be immediate, compared to when you try to iterate over a large list of elements.