Implement lazy loading for the table data

apps/client/src/app/pages/portfolio/activities/activities-page.component.ts

@@ -22,6 +22,7 @@ import { takeUntil } from 'rxjs/operators';
 import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog/create-or-update-activity-dialog.component';
 import { ImportActivitiesDialog } from './import-activities-dialog/import-activities-dialog.component';
 import { ImportActivitiesDialogParams } from './import-activities-dialog/interfaces/interfaces';
+import { MatTableDataSource } from '@angular/material/table';
 
 @Component({
   selector: 'gf-activities-page',
@@ -30,6 +31,7 @@ import { ImportActivitiesDialogParams } from './import-activities-dialog/interfa
 })
 export class ActivitiesPageComponent implements OnDestroy, OnInit {
   public activities: Activity[];
+  public dataSource: MatTableDataSource<Activity> = new MatTableDataSource();
   public defaultAccountId: string;
   public deviceType: string;
   public hasImpersonationId: boolean;
@@ -109,6 +111,8 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit {
       .subscribe(({ activities }) => {
         this.activities = activities;
 
+        this.dataSource = new MatTableDataSource(this.activities);
+
         if (
           this.hasPermissionToCreateActivity &&
           this.activities?.length <= 0

apps/client/src/app/pages/portfolio/activities/activities-page.html

@@ -5,6 +5,7 @@
       <gf-activities-table
         [activities]="activities"
         [baseCurrency]="user?.settings?.baseCurrency"
+        [dataSource]="dataSource"
         [deviceType]="deviceType"
         [hasPermissionToCreateActivity]="hasPermissionToCreateActivity"
         [hasPermissionToExportActivities]="!hasImpersonationId"

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -34,6 +34,7 @@ import { Subject, Subscription, distinctUntilChanged, takeUntil } from 'rxjs';
 })
 export class ActivitiesTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() activities: Activity[];
+  @Input() dataSource: MatTableDataSource<Activity>;
   @Input() baseCurrency: string;
   @Input() deviceType: string;
   @Input() hasPermissionToCreateActivity: boolean;
@@ -61,7 +62,6 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy, OnInit {
   @ViewChild(MatSort) sort: MatSort;
 
   public allFilters: Filter[];
-  public dataSource: MatTableDataSource<Activity> = new MatTableDataSource();
   public defaultDateFormat: string;
   public displayedColumns = [];
   public endOfToday = endOfToday();
@@ -144,6 +144,10 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy, OnInit {
 
     this.defaultDateFormat = getDateFormatString(this.locale);
 
+    if (!this.dataSource) {
+      this.dataSource = new MatTableDataSource(this.activities);
+    }
+
     if (this.activities) {
       this.activities = this.activities.map((activity) => {
         return {
@@ -161,7 +165,6 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy, OnInit {
 
       this.allFilters = this.getSearchableFieldValues(this.activities);
 
-      this.dataSource = new MatTableDataSource(this.activities);
       this.dataSource.filterPredicate = (data, filter) => {
         const filterableLabels = this.getFilterableValues(data).map(
           ({ label }) => {
@@ -177,6 +180,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy, OnInit {
         }
         return includes;
       };
+
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
       this.dataSource.sortingDataAccessor = get;