[MNT-22924] Fix slow search results loading, limit number of pages (#7609)

* [MNT-22924] Fix slow search results loading, limit number of pages

* Add unit test

* Changed some of the values

lib/core/pagination/pagination.component.html

@@ -41,20 +41,20 @@
             data-automation-id="page-selector"
             [attr.aria-label]="'CORE.PAGINATION.ARIA.CURRENT_PAGE' | translate"
             [matMenuTriggerFor]="pagesMenu"
-            *ngIf="pages.length > 1">
+            *ngIf="lastPage > 1">
             <mat-icon>arrow_drop_down</mat-icon>
         </button>
 
         <div *ngIf="pagination.totalItems">
             <span class="adf-pagination__total-pages">
-                {{ 'CORE.PAGINATION.TOTAL_PAGES' | translate: { total: pages.length } }}
+                {{ 'CORE.PAGINATION.TOTAL_PAGES' | translate: { total: lastPage } }}
             </span>
         </div>
 
         <mat-menu #pagesMenu="matMenu" class="adf-pagination__page-selector">
             <button
                 mat-menu-item
-                *ngFor="let pageNumber of pages"
+                *ngFor="let pageNumber of limitedPages"
                 (click)="onChangePageNumber(pageNumber)">
                 {{ pageNumber }}
             </button>

lib/core/pagination/pagination.component.spec.ts

@@ -373,4 +373,23 @@ describe('PaginationComponent', () => {
             expect(component.pages).toEqual([1]);
         });
     });
+
+    describe('many pages', () => {
+        it('should all the pages be available if equal or less than 100', () => {
+            component.pagination = new FakePaginationInput(100, 30, 5);
+
+            expect(component.limitedPages.length).toBe(100);
+            expect(component.pages).toEqual(component.limitedPages);
+        });
+
+        it('should only some pages be available if over 100', () => {
+            component.pagination = new FakePaginationInput(101, 30, 5);
+
+            const expectedPages = [1, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
+                31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 101];
+            console.log(component.pagination.totalItems, component.pagination.skipCount);
+            expect(component.limitedPages).toEqual(expectedPages);
+            expect(component.limitedPages).not.toEqual(component.pages);
+        });
+    });
 });

lib/core/pagination/pagination.component.ts

@@ -214,6 +214,20 @@ export class PaginationComponent implements OnInit, OnDestroy, PaginationCompone
             .map((_, index) => (index + 1));
     }
 
+    get limitedPages(): number[] {
+        if (this.lastPage <= 100) {
+            return this.pages;
+        }
+        const twentyItems = Array.from(Array(20));
+        return [
+            1,
+            ...twentyItems.map((_, i) => this.current - i - 1).reverse(),
+            this.current,
+            ...twentyItems.map((_, i) => this.current + i + 1),
+            this.lastPage
+        ].filter((value: number, index: number, array: number[]) => value > 0 && value <= this.lastPage && !array.slice(0, index).includes(value));
+    }
+
     get itemRangeText(): string {
         const rangeString = this.range.join('-');