Ionic 4 Correct way to show Loading, No records and data block

Question

Here\'s the problem. I have three states of almost all the pages in my app. 1. Loading (where I want to show spinner within the page and for that I have created a component alre

Answer 1

Advertisement: This is a response in Angular (I suppose can be inspiration for Ionic)

You can create an operator, see this SO

Well, change the operator to send 1 when start loading, -1 if finalize without no data and 0 if finalize with data:

The operator:

export const prepare = (callback: () => void) => {
    return (source: Observable): Observable =>
        defer(() => {
            callback();
            return source;
        });
};

export const indicate = (indicator: Subject) => {
    let alive = true;
  let noData=false;
    return (source: Observable): Observable =>
        source.pipe(
            prepare(() =>
                timer(500)
                    .pipe(
                        takeWhile(() => alive),
                        take(1)
                    )
                    .subscribe(() => {
                        indicator.next(1);
                    })
            ),
      tap(res=>{
        noData=(!res || (Array.isArray(res) && res.length<=0))
      }),
            finalize(() => {
                alive = false;
                indicator.next(noData?-1:0);
            })
        );
};

export const toClass = (ClassType: { new(): T }) => (
    source: Observable
) => source.pipe(map(val => Object.assign(new ClassType(), val)));

the loading component:

@Component({
  selector: 'app-loading',
  template:`
  

    

        

            
Loading...
            
Empty
        
    

  `,
  styleUrls: [ './loading.component.css' ]
})
export class LoadingComponent  {
  constructor(public dataService:DataService){}
}

See how close the modal using dataService.loading$.next(0) and how I declared as public my dataService in the constructor

I make a simple example of use

load

    {{data}}

And a simple service that simulate a call, return random null or the date time

export class DataService {
  loading$ = new Subject()
  getData():Observable
  {
    const observable=of(Math.random()<.5?
              'New Data at '+new Date():
               null
    ).pipe(delay(1000))

    return observable.pipe(
      indicate(this.loading$))
  }
}

You can see the stackblitz, You see the "loading", then, some times you'll see that is empty, and another time the "loading" close.