WIP: infinite scrolling

package-lock.json

@@ -9337,6 +9337,14 @@
       "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
       "dev": true
     },
+    "ngx-infinite-scroll": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-8.0.1.tgz",
+      "integrity": "sha512-YpgkTPDNT7UCEp0GRX178V1nF+M2slCPJ2TX3CpvPZb5AR99JYwj/fNivcue5lN51oUaTySEG27qjVU73vKhjw==",
+      "requires": {
+        "opencollective-postinstall": "^2.0.2"
+      }
+    },
     "ngx-socket-io": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ngx-socket-io/-/ngx-socket-io-2.1.1.tgz",
@@ -9823,6 +9831,11 @@
         "is-wsl": "^1.1.0"
       }
     },
+    "opencollective-postinstall": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
+      "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw=="
+    },
     "opn": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",

package.json

@@ -33,6 +33,7 @@
     "graphql-tag": "^2.10.0",
     "hammerjs": "^2.0.8",
     "js-sha512": "^0.8.0",
+    "ngx-infinite-scroll": "^8.0.1",
     "ngx-socket-io": "^2.1.1",
     "node-sass": "^4.13.0",
     "rxjs": "~6.3.3",

src/app/app.module.ts

@@ -30,6 +30,8 @@ import { AboutComponent } from './components/about/about.component';
 import { ChatcontactsComponent } from './components/chatmanager/chatcontacts/chatcontacts.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {MatTableModule} from '@angular/material/table';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+
 
 import { MatSliderModule } from '@angular/material/slider';
 import { MatFormFieldModule  } from '@angular/material/form-field';
@@ -114,6 +116,7 @@ const appRoutes: Routes = [
     SocketIoModule.forRoot(config),
     GraphQLModule,
     HttpClientModule,
+    InfiniteScrollModule,
     MatDatepickerModule,
     MatNativeDateModule,
     RouterModule.forRoot(

src/app/components/feed/feed.component.html

@@ -1,4 +1,8 @@
-<div id="home">
+<div id="home"
+infinite-scroll
+[infiniteScrollDistance]="0.5"
+[scrollWindow]="false"
+(scrolled)="onScroll()">
   <div [hidden]="!loggedIn">
     <mat-card >      
       <mat-card-content>
@@ -45,7 +49,7 @@
 <div id="complete-feed">
   <div id="feedlist">
     <feed-postlist [childPostList]="parentSelectedPostList"></feed-postlist>
-    <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 5em;" diameter="50"></mat-spinner>
+    <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 3em;" diameter="50"></mat-spinner>
   </div>
 </div>
 </div>

src/app/components/feed/feed.component.sass

@@ -8,6 +8,7 @@
 #home 
     width: 100% 
     height: 100%
+    overflow-y: scroll
 
 #complete-feed
     box-sizing: border-box

src/app/components/feed/feed.component.ts

@@ -43,7 +43,9 @@ export class FeedComponent implements OnInit {
     });
     this.feedService.getNewPosts();
     this.feedService.posts.subscribe(response => {
-      if (response.length > 0) {this.loading = false; }
+      if (response.length > 0) {
+        // this.loading = false;
+      }
       this.parentSelectedPostList = response;
     });
   }
@@ -62,6 +64,10 @@ export class FeedComponent implements OnInit {
     }
   }
 
+  onScroll() {
+    console.log('scrolled');
+  }
+
   showNew() {
     this.feedService.getNewPosts();
   }

src/app/services/feed/feed.service.ts

@@ -158,7 +158,7 @@ export class FeedService {
 
   buildJsonNew() {
     const body =  {query: `{
-        getPosts (first: 1000, offset: 0) {
+        getPosts (first: 3, offset: 0) {
           id,
           content,
           htmlContent,