fix: add questions list lazy load on the Questions page

Author: hardsoncore

src/app/questions/questions.page.html

@@ -17,7 +17,7 @@
     <ion-searchbar animated="true" placeholder="Search by topic, keyword or ID" (ionInput)="handleInput($event)"></ion-searchbar>
 
     <div class="question-list">
-      @for (question of filteredQuestions; track trackById($index, question)) {
+      @for (question of visibleQuestions; track trackById($index, question)) {
         <ion-item
           class="question"
           button
@@ -28,7 +28,7 @@
           <ion-icon name="arrow-forward" slot="end" class="chevron-icon"></ion-icon>
           <ion-label>
             <h2 class="question__name">{{ question.id }}. {{ question.name }}</h2>
-            @let pct = (getPercentById(question.id) | async) ?? 0;
+            @let pct = getPercent(question.id);
             <div class="question__details">
               @if (question.level) {
                 <span class="level-pill level-pill--{{ levelColor(question.level) }}">{{ question.level }}</span>
@@ -42,5 +42,13 @@ <h2 class="question__name">{{ question.id }}. {{ question.name }}</h2>
         </ion-item>
       }
     </div>
+
+    <ion-infinite-scroll
+      threshold="100px"
+      [disabled]="visibleQuestions.length >= filteredQuestions.length"
+      (ionInfinite)="loadMore($event)"
+      >
+      <ion-infinite-scroll-content loadingSpinner="crescent"></ion-infinite-scroll-content>
+    </ion-infinite-scroll>
   </div>
 </ion-content>

src/app/questions/questions.page.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 import { Router } from '@angular/router';
-import { BehaviorSubject, of } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
 
 import { QuestionsPage } from './questions.page';
 import { QuestionsService } from 'src/app/services/questions.service';
@@ -26,7 +26,7 @@ describe('QuestionsPage', () => {
   let fixture: ComponentFixture<QuestionsPage>;
 
   let questionsServiceMock: { questions: BehaviorSubject<Question[]> };
-  let resultsServiceMock: { results: BehaviorSubject<Results[]>; getPercentById: jasmine.Spy };
+  let resultsServiceMock: { results: BehaviorSubject<Results[]> };
   let routerMock: { navigate: jasmine.Spy };
 
   const questions: Question[] = [
@@ -39,7 +39,6 @@ describe('QuestionsPage', () => {
     questionsServiceMock = { questions: new BehaviorSubject<Question[]>(questions) };
     resultsServiceMock = {
       results: new BehaviorSubject<Results[]>([{ id: 1, correctness: 80 }]),
-      getPercentById: jasmine.createSpy('getPercentById').and.returnValue(of(80)),
     };
     routerMock = { navigate: jasmine.createSpy('navigate') };
 
@@ -68,7 +67,36 @@ describe('QuestionsPage', () => {
 
       expect(component.questions).toEqual(questions);
       expect(component.filteredQuestions).toEqual(questions);
+      expect(component.visibleQuestions).toEqual(questions);
       expect(component.results).toEqual([{ id: 1, correctness: 80 }]);
+      expect(component.percentById.get(1)).toBe(80);
+    });
+
+    it('should render only the first batch when there are many questions', () => {
+      const manyQuestions = Array.from({ length: 80 }, (_, i) => makeQuestion({ id: i + 1 }));
+      questionsServiceMock.questions.next(manyQuestions);
+
+      component.ngOnInit();
+
+      expect(component.filteredQuestions.length).toBe(80);
+      expect(component.visibleQuestions.length).toBe(30);
+    });
+  });
+
+  describe('loadMore', () => {
+    it('should append the next batch and complete the infinite scroll event', () => {
+      const manyQuestions = Array.from({ length: 80 }, (_, i) => makeQuestion({ id: i + 1 }));
+      questionsServiceMock.questions.next(manyQuestions);
+      component.ngOnInit();
+
+      const event = { target: { complete: jasmine.createSpy('complete') } };
+      component.loadMore(event as never);
+
+      expect(component.visibleQuestions.length).toBe(60);
+      expect(event.target.complete).toHaveBeenCalled();
+
+      component.loadMore(event as never);
+      expect(component.visibleQuestions.length).toBe(80);
     });
   });
 
@@ -84,6 +112,7 @@ describe('QuestionsPage', () => {
 
       expect(component.filteredQuestions.length).toBe(1);
       expect(component.filteredQuestions[0].id).toBe(2);
+      expect(component.visibleQuestions).toEqual(component.filteredQuestions);
     });
 
     it('should filter by tag', () => {
@@ -109,6 +138,7 @@ describe('QuestionsPage', () => {
       component.handleInput(inputEvent('   '));
 
       expect(component.filteredQuestions).toEqual(questions);
+      expect(component.visibleQuestions).toEqual(questions);
     });
 
     it('should return an empty list when nothing matches', () => {
@@ -123,12 +153,11 @@ describe('QuestionsPage', () => {
       expect(component.trackById(0, questions[0])).toBe(1);
     });
 
-    it('getPercentById should delegate to ResultsService', (done) => {
-      component.getPercentById(1).subscribe(percent => {
-        expect(percent).toBe(80);
-        expect(resultsServiceMock.getPercentById).toHaveBeenCalledWith(1);
-        done();
-      });
+    it('getPercent should return the stored percent or 0', () => {
+      component.ngOnInit();
+
+      expect(component.getPercent(1)).toBe(80);
+      expect(component.getPercent(999)).toBe(0);
     });
 
     it('clickOnQuestion should navigate to question-info with the question id', () => {

src/app/questions/questions.page.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, inject } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { NavigationExtras, Router } from '@angular/router';
 
@@ -10,31 +10,39 @@ import { ResultsService } from 'src/app/services/results.service';
 import { QuestionLevels } from 'src/app/enums/questions.enum';
 import { Colors } from 'src/app/enums/app.enum';
 import { IonicModule } from '@ionic/angular';
-import { AsyncPipe } from '@angular/common';
+import type { InfiniteScrollCustomEvent } from '@ionic/angular';
 @Component({
     selector: 'app-questions',
     templateUrl: 'questions.page.html',
     styleUrls: ['questions.page.scss'],
     changeDetection: ChangeDetectionStrategy.Eager,
-    imports: [IonicModule, AsyncPipe]
+    imports: [IonicModule]
 })
 export class QuestionsPage implements OnInit, OnDestroy {
+  private static readonly BATCH_SIZE = 30;
+
   private questionsService = inject(QuestionsService);
   private router = inject(Router);
   private resultsService = inject(ResultsService);
 
   questions: Question[] = [];
   filteredQuestions: Question[] = [];
+  visibleQuestions: Question[] = [];
   results: Results[];
+  percentById = new Map<number, number>();
 
   private destroy$ = new Subject<void>();
 
   ngOnInit() {
     this.questionsService.questions.pipe(takeUntil(this.destroy$)).subscribe(questions => {
       this.questions = questions;
       this.filteredQuestions = questions;
+      this.visibleQuestions = questions.slice(0, QuestionsPage.BATCH_SIZE);
+    });
+    this.resultsService.results.pipe(takeUntil(this.destroy$)).subscribe(results => {
+      this.results = results;
+      this.percentById = new Map(results.map(r => [Number(r.id), r.correctness]));
     });
-    this.resultsService.results.pipe(takeUntil(this.destroy$)).subscribe(results => this.results = results);
   }
 
   ngOnDestroy() {
@@ -48,6 +56,7 @@ export class QuestionsPage implements OnInit, OnDestroy {
 
     if (!query.trim()) {
       this.filteredQuestions = [...this.questions];
+      this.visibleQuestions = this.filteredQuestions.slice(0, QuestionsPage.BATCH_SIZE);
       return;
     }
 
@@ -59,14 +68,20 @@ export class QuestionsPage implements OnInit, OnDestroy {
 
       return matchTags || matchCategory || matchName || matchId;
     });
+    this.visibleQuestions = this.filteredQuestions.slice(0, QuestionsPage.BATCH_SIZE);
+  }
+
+  public loadMore(event: InfiniteScrollCustomEvent) {
+    this.visibleQuestions = this.filteredQuestions.slice(0, this.visibleQuestions.length + QuestionsPage.BATCH_SIZE);
+    event.target.complete();
   }
 
   public trackById(index: number, item: Question) {
     return item.id;
   }
 
-  public getPercentById(id: number): Observable<number> {
-    return this.resultsService.getPercentById(id);
+  public getPercent(id: number): number {
+    return this.percentById.get(Number(id)) ?? 0;
   }
 
   public levelColor(level: QuestionLevels): Colors {