docs: improve API rate-limit error handling in table-http-example

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}`;