Styling and Refinements

Now we just have a few remaining loose ends to finish up - there are a few minor changes we are going to make just to provide a better experience in the application, and to make it look a little nicer.

Adding Titles and Comments

The first thing we are going to do is display a bar below each GIF that will show the title of the GIF, along with how many comments it has, and a link to that GIF on Reddit.

Add the following beneath the ion-item in the GifListComponent:

        <ion-list-header>
          <ion-label> {{ gif.title }} </ion-label>
          <ion-button (click)="showComments(gif)">
            <ion-icon name="chatbubbles"></ion-icon> {{ gif.comments }}
          </ion-button>
        </ion-list-header>

We are binding to a showComments method here that we haven’t implemented yet. This is another good change to try and implement this yourself before we look at my solution. This method should use the Capacitor Browser plugin to launch the link to view this post on Reddit.

Run the following command:

npm install @capacitor/browser

Create a showComments method in the class for GifListComponent:

  showComments(gif: Gif) {
    Browser.open({
      toolbarColor: '#fff',
      url: `https://reddit.com/${gif.permalink}`,
      windowName: '_system',
    });
  }

Loading Indicator

Currently, when we change subreddits there isn’t any indication that anything is happening until the GIFs pop in. What we are going to do now is display a loading bar in this situation. To support this, we first need to know when the RedditService is loading something.

Add the following class member to the RedditService:

isLoading$ = new BehaviorSubject(false);

Emit true when GIFs are loading:

        const gifsForCurrentPage$ = this.pagination$.pipe(
          tap(() => this.isLoading$.next(true)),

Emit false once loading is finished:

if (!shouldKeepTrying) {
    pagination.infiniteScroll?.complete();
    this.isLoading$.next(false);
}

Add isLoading$ to the vm$ for HomeComponent:

  vm$ = combineLatest([
    this.gifs$.pipe(startWith([])),
    this.redditService.isLoading$,
    this.settingsModalIsOpen$,
  ]).pipe(
    map(([gifs, isLoading, modalIsOpen]) => ({
      gifs,
      isLoading,
      modalIsOpen,
    }))
  );