Default null value for an observable stream-CodePudding

I have the following observable which is working fine:

this.studentApplications$ = this.activatedRoute.queryParams.pipe(
        switchMap((obj: any) => this.httpService.getStudentApplicationsList(this.numberOfRows, new URLSearchParams(obj).toString()))
      );

It listens to any changes in the query params and conducts the search again. My problem is that on the initial page load I get to see my lovely skeleton screen (because the value is initially null). However when the query params changes it's holding the existing array of objects until the new set comes in to overwrite them - therefore I don't get to see the skeleton screen again.

How can I set a default value of null to the stream as soon as the query params are triggered again? I'm expecting the skeleton screen to appear briefly again until the next set of results comes in.

CodePudding user response：

You can use startWith.

this.studentApplications$ = this.activatedRoute.queryParams.pipe(
  switchMap((obj: any) => this.httpService.getStudentApplicationsList(
    this.numberOfRows, 
    new URLSearchParams(obj).toString())
  )
    .pipe(startWith(null))
);

CodePudding user response：

You can use concat. See docs. This allows you to preserve the order when combining multiple observables. Take a look at this stackblitz for an applicable example for your situation.

Your code would look something like:

this.studentApplications$ = this.activatedRoute.queryParams.pipe(
  switchMap((obj: any) => concat(of(null), this.httpService.getStudentApplicationsList(this.numberOfRows, new URLSearchParams(obj).toString())))
);

Each new value from activatedRoute.queryParams would emit null first, then the results from your service when they are received.