feat: lazy load all news

src/app/modules/news/news.provider.ts

@@ -29,8 +29,9 @@ export class NewsProvider {
    * Get news messages
    *
    * @param size How many messages/news to fetch
+   * @param from From which (results) page to start
    */
-  async getList(size: number): Promise<SCMessage[]> {
+  async getList(size: number, from: number): Promise<SCMessage[]> {
     const result = await this.dataProvider.search({
       filter: {
         type: 'value',
@@ -47,6 +48,7 @@ export class NewsProvider {
         order: 'desc',
       }],
       size: size,
+      from: from,
     });
 
     return result.data as SCMessage[];

src/app/modules/news/page/news-page.component.ts

@@ -24,20 +24,38 @@ import {NewsProvider} from '../news.provider';
   templateUrl: 'news-page.html',
 })
 export class NewsPageComponent {
+  /**
+   * Thing counter to start query the next page from
+   */
+  from = 0;
+  /**
+   * Page size of queries
+   */
+  pageSize = 10;
   /**
    * News (messages) to show
    */
   news: SCMessage[] = [];
 
-  constructor(private newsProvider: NewsProvider) {
-  }
+  constructor(private newsProvider: NewsProvider) {}
 
   /**
    * Fetch news from the backend
    */
   async fetchNews() {
-    /* tslint:disable:no-magic-numbers */
-    this.news = await this.newsProvider.getList(30);
+    this.news = await this.newsProvider.getList(this.pageSize, this.from);
+  }
+
+  /**
+   * Loads more news
+   *
+   * @param event Signal from the infinite scroll to load more data
+   */
+  // tslint:disable-next-line:no-any
+  async loadMore(event: any): Promise<void> {
+    this.from += this.pageSize;
+    this.news = this.news.concat(await this.newsProvider.getList(this.pageSize, this.from));
+    event.target.complete();
   }
 
   /**
@@ -54,6 +72,7 @@ export class NewsPageComponent {
    */
   async refresh(refresher: IonRefresher) {
     try {
+      this.from = 0;
       await this.fetchNews();
     } catch (e) {
       this.news = [];

src/app/modules/news/page/news-page.html

@@ -4,18 +4,15 @@
       <ion-back-button></ion-back-button>
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
-    <!--TODO: read this from the config (menu item title)-->
-    <ion-title>{{ 'news.title' | translate }}</ion-title>
+    <ion-title>{{'news.title'  | translate}}</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content fullscreen>
   <ion-refresher slot="fixed" (ionRefresh)="refresh($event.target)">
-    <ion-refresher-content
-      pullingIcon="chevron-down-outline"
-      pullingText="{{ 'data.REFRESH_ACTION' | translate }}"
-      refreshingText="{{ 'data.REFRESHING' | translate }}"
-    >
+    <ion-refresher-content pullingIcon="chevron-down-outline" pullingText="{{'data.REFRESH_ACTION' | translate}}"
+      refreshingText="{{'data.REFRESHING' | translate}}"
+      refreshingSpinner="crescent">
     </ion-refresher-content>
   </ion-refresher>
   <ion-grid>
@@ -30,4 +27,8 @@
       </ion-col>
     </ion-row>
   </ion-grid>
+  <ion-infinite-scroll id="infinite-scroll" threshold="20%" (ionInfinite)="loadMore($event)">
+    <ion-infinite-scroll-content loading-spinner="crescent">
+    </ion-infinite-scroll-content>
+  </ion-infinite-scroll>
 </ion-content>