fix(ui): fixed position calculation for infinite scrolling

Previously we listened to the scroll event and calculated the position while the scrolling was taking place. This could lead to a buggy behaviour of the infinite scrolling list if the scroll-area was bigger than 400 px.
We added a debounce-timer to debounce the position calculation after the scroll is finished.

Closes: #153

src/app/components/api-card-list/api-card-list.component.html

@@ -32,7 +32,7 @@
       mat-icon-button
       aria-label="Clear"
       color="primary"
-      (click)="fetchApis(true)">
+      (click)="resetSearch()">
       <mat-icon>clear</mat-icon>
     </button>
   </mat-form-field>

src/app/components/api-card-list/api-card-list.component.ts

@@ -69,7 +69,7 @@ export class ApiCardListComponent implements OnInit, OnDestroy {
    */
   private initScrollEventListener() {
     fromEvent(window, 'scroll')
-      .pipe(throttleTime(200))
+      .pipe(throttleTime(333), debounceTime(250))
       .subscribe(() => {
         const scrollPosition = window.scrollY;
         const windowSize = window.innerHeight;
@@ -90,6 +90,11 @@ export class ApiCardListComponent implements OnInit, OnDestroy {
     this.fetchApis(true);
   }
 
+  public resetSearch() {
+    this.searchTerm = '';
+    this.fetchApis(true);
+  }
+
   /**
    * Fetches APIs from the backend, which will extend or reset the entire API list.
    *