How do I use the ionic infinite scroll in conjunction with SQL lite data capacitor 4?

Question

I'm using SQL lite to store data in my Android app, and I'd like to use infinite scroll to improve performance.

I read the documentation.

https://ionicframework.com/docs/api/infinite-scroll

This is my database.service.ts file

import { Injectable } from '@angular/core';
import { IRoute } from '../models/IRoute';
import { QueryService } from './query.service';
import { SQLiteDBConnection, DBSQLiteValues } from '@capacitor-community/sqlite';

@Injectable({
  providedIn: 'root'
})
export class DatabaseService {

  constructor(private queryService: QueryService) {

  }

  async getAllFavoriteRoutes(limit: number, offset: number): Promise<IRoute[]> {
    return this.queryService.executeQuery<any>(async (db: SQLiteDBConnection) => {
      var routes: DBSQLiteValues = await db.query("SELECT * FROM favoriteroutes LIMIT ? OFFSET ?", [limit, offset]);
      return routes.values as IRoute[];
    });
  }

}

Then I my favorites.page.ts I use this method like this:

import { Component, OnInit } from '@angular/core';
import { DatabaseService } from '../services/database.service';
import { IRoute } from '../models/IRoute';

@Component({
  selector: 'app-favorites',
  templateUrl: './favorites.page.html',
  styleUrls: ['./favorites.page.scss'],
})
export class FavoritesPage implements OnInit {

  public favoriteroutes: IRoute[] = [];
  limit: number = 10;
  offset: number = 0;

  constructor(private databaseService: DatabaseService) { }

  ngOnInit() {  
    this.loadData(null);
  }

  loadData(event) {
    this.databaseService.getAllFavoriteRoutes(this.limit, this.offset).then((data) => {
      this.favoriteroutes = this.favoriteroutes.concat(data);
      this.offset += this.limit;
      if (event) {
        event.target.complete();
      }
    }).catch((error) => {
      console.error(error);
      if (event) {
        event.target.complete();
      }
    });
  }

}

And this is my favorites.page.html

<ion-header>
  <ion-toolbar class="app-theme-color">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Favorites</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="secondary">
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-card class="animate__animated animate__slideInLeft" *ngFor="let route of favoriteroutes"
          [routerLink]="['/', 'routedetails', route.id]">
          <ion-row>
            <ion-col>
              <div class="ion-text-begin">
                {{ route.nameroute }}
              </div>
            </ion-col>             
          </ion-row>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-infinite-scroll (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

The issue is that the Android app only displays 10 records and does not scroll or show the other data loading.

I tried several tutorials before this one, but it was based on an API request.

Is it possible to use infinitescroll with SQL lite data?

Answer 1

I increased the variable to 50, and it worked.

limit: number = 50;