fix: infinite scroll + use IntersectionObserver

src/app/search/search-result/search-result.component.html

@@ -1,6 +1,6 @@
 <section
   *ngIf="packages.length > 0"
-  appInfiniteScroll
+  appInfiniteScroll="load-more"
   (scroll)="onScroll()"
 >
   <app-card
@@ -9,4 +9,5 @@
     [isFullMode]="false"
   >
   </app-card>
+  <div class="load-more"></div>
 </section>

src/app/search/search-result/search-result.component.ts

@@ -33,4 +33,5 @@ export class SearchResultComponent implements OnChanges {
   onScroll() {
     this.scrollReachedBottom.emit();
   }
+
 }

src/app/search/search.module.ts

@@ -3,13 +3,12 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { SharedModule } from '../shared/shared.module';
 import { MatModule } from './../core/mat/mat.module';
-import { InfiniteScrollDirective } from './infinite-scroll.directive';
-import { SearchResultComponent } from './search-result/search-result.component';
 import { SearchRoutingModule } from './search-routing.module';
+import { SearchResultComponent } from './search-result/search-result.component';
 import { SearchComponent } from './search/search.component';
 
 @NgModule({
   imports: [CommonModule, ReactiveFormsModule, MatModule, SearchRoutingModule, SharedModule],
-  declarations: [SearchComponent, SearchResultComponent, InfiniteScrollDirective],
+  declarations: [SearchComponent, SearchResultComponent],
 })
 export class SearchModule { }

src/app/search/search/search.component.ts

@@ -13,7 +13,7 @@ import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 import { MetricsService } from 'src/app/shared/metrics.service';
 import { PackageType } from 'src/typings';
 import { AlgoliaService } from './../../core/algolia/algolia.service';
-import { DeeplinkService } from './../deeplink.service';
+import { DeeplinkService } from '../../shared/deeplink.service';
 
 @Component({
   selector: 'app-search',
@@ -81,8 +81,8 @@ export class SearchComponent implements OnInit, AfterContentInit {
       } else {
         // get the actual result
         if (this.shouldAppendResults()) {
-          this.packages.mutate((packages: PackageType[]) => {
-            packages = [...packages, ...results.hits];
+          this.packages.update((packages: PackageType[]) => {
+            return [...packages, ...results.hits];
           });
 
         } else {
@@ -155,7 +155,7 @@ export class SearchComponent implements OnInit, AfterContentInit {
     if (!this.hasReachedLastPage()) {
       this.shouldAppendResults.set(true);
       this.search.nextPage();
-      this.snackBar.open('Loading Packages...', undefined, {
+      this.snackBar.open('Loading more packages...', undefined, {
         duration: 2000,
         horizontalPosition: 'center',
         verticalPosition: 'bottom'

src/app/shared/card/card.component.ts

@@ -9,7 +9,7 @@ import {
   Renderer2,
 } from '@angular/core';
 import { Router } from '@angular/router';
-import { DeeplinkService } from 'src/app/search/deeplink.service';
+import { DeeplinkService } from 'src/app/shared/deeplink.service';
 import {
   CSSStyleDeclarationWithViewTransitionAPI,
   DocumentWithViewTransitionAPI,

src/app/search/deeplink.service.ts → src/app/shared/deeplink.service.ts

@@ -1,4 +1,4 @@
-import { AlgoliaService } from './../core/algolia/algolia.service';
+import { AlgoliaService } from '../core/algolia/algolia.service';
 import { FormGroup } from '@angular/forms';
 import { Injectable } from '@angular/core';
 import { ActivatedRoute, Router, Params } from '@angular/router';

src/app/shared/infinite-scroll.directive.ts

@@ -0,0 +1,27 @@
+import { DOCUMENT } from '@angular/common';
+import {
+  AfterViewInit,
+  Directive,
+  EventEmitter,
+  Inject,
+  Input,
+  Output,
+} from '@angular/core';
+
+@Directive({
+  selector: '[appInfiniteScroll]',
+})
+export class InfiniteScrollDirective implements AfterViewInit {
+  @Output() scroll = new EventEmitter();
+  @Input() appInfiniteScroll = 'load-more';
+
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
+  ngAfterViewInit() {
+    const intersectionObserver = new IntersectionObserver((entries) => {
+      if (entries[0].intersectionRatio <= 0) return;
+      this.scroll.emit();
+    });
+    intersectionObserver.observe(this.document.querySelector(`.${this.appInfiniteScroll}`) as HTMLElement);
+  }
+}

src/app/shared/shared.module.ts

@@ -5,10 +5,11 @@ import { CardComponent } from './card/card.component';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { HumanDatePipe } from '../search/humain-date.pipe';
+import { HumanDatePipe } from './humain-date.pipe';
 import { MatChipsModule } from '@angular/material/chips';
 import { RouterModule } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
+import { InfiniteScrollDirective } from './infinite-scroll.directive';
 
 const MAT_MODULES = [
   MatCardModule,
@@ -20,7 +21,7 @@ const MAT_MODULES = [
 
 @NgModule({
   imports: [CommonModule, RouterModule, ...MAT_MODULES],
-  declarations: [NotFoundComponent, CardComponent, HumanDatePipe],
-  exports: [CardComponent]
+  declarations: [NotFoundComponent, CardComponent, HumanDatePipe, InfiniteScrollDirective],
+  exports: [NotFoundComponent, CardComponent, HumanDatePipe, InfiniteScrollDirective]
 })
 export class SharedModule {}