docs: improve API rate-limit error handling in table-http-example (#22776)

There are currently three issues with the `table-http-example`:

1. If a user hits the rate limit within this example, an overlay
will be displayed mentioning the rate limit issue. This overlay
intends to overlap the whole table, except for the paginator. Right
now this is broken as there is a minium height throwing off the
assumption that the paginator is at the bottom of the example.

2. If a user hits the rate limit, the paginator length is reset to
zero. This means that the user is unable to trigger new requests
as the previous/next page buttons become disabled.

3. Due to incorrect error handling, the observable will be
replaced by a new one that will always return an empty list.
The rate limit/API errors should be caught within the switch
map to not prevent future API requests on errors.

Fixes #11547.

Author: devversion

src/components-examples/material/table/table-http/table-http-example.css

@@ -1,11 +1,11 @@
 /* Structure */
 .example-container {
   position: relative;
-  min-height: 200px;
 }
 
 .example-table-container {
   position: relative;
+  min-height: 200px;
   max-height: 400px;
   overflow: auto;
 }

src/components-examples/material/table/table-http/table-http-example.ts

@@ -1,7 +1,7 @@
 import {HttpClient} from '@angular/common/http';
 import {Component, ViewChild, AfterViewInit} from '@angular/core';
 import {MatPaginator} from '@angular/material/paginator';
-import {MatSort} from '@angular/material/sort';
+import {MatSort, SortDirection} from '@angular/material/sort';
 import {merge, Observable, of as observableOf} from 'rxjs';
 import {catchError, map, startWith, switchMap} from 'rxjs/operators';
 
@@ -39,21 +39,23 @@ export class TableHttpExample implements AfterViewInit {
         switchMap(() => {
           this.isLoadingResults = true;
           return this.exampleDatabase!.getRepoIssues(
-            this.sort.active, this.sort.direction, this.paginator.pageIndex);
+              this.sort.active, this.sort.direction, this.paginator.pageIndex)
+            .pipe(catchError(() => observableOf(null)));
         }),
         map(data => {
           // Flip flag to show that loading has finished.
           this.isLoadingResults = false;
-          this.isRateLimitReached = false;
-          this.resultsLength = data.total_count;
+          this.isRateLimitReached = data === null;
+
+          if (data === null) {
+            return [];
+          }
 
+          // Only refresh the result length if there is new data. In case of rate
+          // limit errors, we do not want to reset the paginator to zero, as that
+          // would prevent users from re-triggering requests.
+          this.resultsLength = data.total_count;
           return data.items;
-        }),
-        catchError(() => {
-          this.isLoadingResults = false;
-          // Catch if the GitHub API has reached its rate limit. Return empty data.
-          this.isRateLimitReached = true;
-          return observableOf([]);
         })
       ).subscribe(data => this.data = data);
   }
@@ -75,7 +77,7 @@ export interface GithubIssue {
 export class ExampleHttpDatabase {
   constructor(private _httpClient: HttpClient) {}
 
-  getRepoIssues(sort: string, order: string, page: number): Observable<GithubApi> {
+  getRepoIssues(sort: string, order: SortDirection, page: number): Observable<GithubApi> {
     const href = 'https://api.github.com/search/issues';
     const requestUrl =
         `${href}?q=repo:angular/components&sort=${sort}&order=${order}&page=${page + 1}`;