Covalent: TdLoading Pipe or Directive when using an Angular async pipe

[trkbrkr2000]

Feature Request

TdLoading Pipe or Directive

When using an asynchronous pipe in conjunction with an *ngFor it would be nice for the TdLoading service to track the start and end of an XHR request to the remote server.

What is the expected behavior?

If I use the following snippet of code the TdLoading pipe or service should be able to start an infinite progress indicator.

When the remote call is complete and the object list is available to be iterated over the progress indicator should disappear.

<div *ngFor="let item of items | async | tdLoading">
   {{item.name}}
</div>

[emoralesb05]

I am thinking it might have to work something like this:

<ng-template [tdLoading]="items$ | async as items">
  <div *ngFor="let item of  items">
     {{item.name}}
  </div>
</ng-template>

So you can leverage the output of the observable, and the tdLoading can only show when its doing something.

Still brainstorming about this.

[emoralesb05]

Playing around with this, and i think it will be something like described before:

    <div *tdLoading="observable | async as items">
      <div *ngFor="let value of items">
        {{value}}
      </div>
    </div>

OR

    <div *tdLoading="observable | async as value'">
        <div>{{value.name}}</div>
        <div>{{value.age}}</div>
    </div>

Since when using the async pipe, what we get as input is null, and then once its resolved we get what it returned as input.

We can translate this as true or false (which will also be a way of using it)

Diving in more 🤓

[emoralesb05]

Or possibly like this to separate concerns:

<div *tdLoading="'name'; [new_input_here]: observable | async as items">

[trkbrkr2000]

I think that this approach would leave the least amount of questions about what is going on. The syntax is readable and leaves no room for interpretation. This approach also implies the developer use one loading service per item placed on the page without having to declare a named element to be resolved when the observable is returned.

 <div *tdLoading="observable | async as items">
      <div *ngFor="let value of items">
        {{value}}
      </div>
 </div>

Or

<div *tdLoading="observable | async as value'">
      <div>{{value.name}}</div>
      <div>{{value.age}}</div>
</div>

---

Where as this approach <div *tdLoading="'name'; [new_input_here]: observable | async as items"> might leave someone wondering why they would need to use the string name in the configuration of the loading service when the contained element is the target item they want the loading service to mask while loading is in progress.

---

All the while I think that both approaches would provide great utility when binding to an observable data source.

[emoralesb05]

PR created with the final design of this 😄

Quite happy with the way it works now https://github.com/Teradata/covalent/pull/583