Aurelia for.repeat wait spinner

Question

I have a really simple test case where I get a large list of Json entries say 2000 items. I simply want to display all these items on one page. (Forget about whether that is a good design or not).

I have a standard spinner specified in my index.html that is displayed when loading the page and changing pages. However, the spinner stops and the page is displayed before the for.repeat loop completes.

What is the best way to handle this. I have tried to add a new spinner that page just for the for.repeat but there does not seem to be a way to know when the loop completes. I have tried using TaskQueue without success. I could use a setTimeout as a dirty hack but I would like to know the correct way to handle this kind of thing.

Thanks

Answer 1

I'm pretty sure this would 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 a different module, you could either bind the property from the parent component:

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

Or you could use Aurelia's eventAggregator to communicate the events to start and stop the spinner. The first one is simpler, however.