Бесконечная прокрутка + несколько вкладок, вызывающих несколько запросов

Question

Я использую несколько вкладок на одной странице и использовал бесконечную прокрутку на обеих вкладках, но вызываю несколько с каждой прокруткой

Эта страница html, здесь я использую 2 вкладки с бесконечной прокруткой

<div class="py-5">
<tabset>
  <tab heading="Accepted" id="tab1" (selectTab)="onLoadData('ACCEPTED')">
    <div class="py-4">
      <div class="row">
        <div class="col-7">
          <h1 class="darkBlueFont bold montserratFont font-20 py-2">Accepted Entries</h1>
        </div>
      </div>
      <div class="py-3">
        <table class="table  table-bordered table-hover">
          <thead class="darkBlueBG text-white font-12 regular montseratFont">
            <tr>
              <th scope="col" class="regular">#</th>
              <th scope="col" class="regular">Name</th>
              <th scope="col" class="regular">Submitted Date</th>

              <th scope="col" class="regular">File</th>
              <th *ngIf="status === 'ACCEPTED'" scope="col" class="regular"></th>
            </tr>
          </thead>
          <tbody class="disputeListScroll scrollbar" id="style-4" infiniteScroll [infiniteScrollDistance]="2"
            [infiniteScrollThrottle]="50" (scrolled)="pageChanged('ACCEPTED')">
            <tr class="montseratFont light font-12" *ngFor="let item of entryArray; let i = index">
              <th scope="row">{{ i + 1 }}</th>
              <td>{{ item.userName }}</td>
              <td>{{ item.dateOfEntry | date: 'longDate' }}</td>
              <td>
                <!-- <a (click)="openModal(template,item.submissionId)" class="pointer"> {{ item.fileName }}</a> -->
                <a (click)="onClickVideo(item.submissionId, item.subCategory, item.categorySubmissionId)" class="pointer"
                  title="'{{ item.fileName }}'">
                  <img alt="File" src="../../../assets/img/movie.svg" class="movieIcon"> </a>
              </td>
              <td *ngIf="status === 'ACCEPTED'">
                <!-- <a (click)="openModal(template,item.submissionId)" class="pointer"> {{ item.fileName }}</a> -->
                <a  (click)="openModal(templatePopup, item.submissionId)" class="pointer">
                  Reject</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </tab>
  <tab heading="Saved" id="tab2" (selectTab)="onLoadData('SAVED')">
    <div class="py-4">
      <div class="row">
        <div class="col-7">
          <h1 class="darkBlueFont bold montserratFont font-20 py-2">Saved Entries</h1>
        </div>
      </div>
      <div class="py-3">
        <table class="table  table-bordered table-hover">
          <thead class="darkBlueBG text-white font-12 regular montseratFont">
            <tr>
              <th scope="col" class="regular">#</th>
              <th scope="col" class="regular">Name</th>
              <th scope="col" class="regular">Submitted Date</th>

              <th scope="col" class="regular">File</th>
              <th *ngIf="status === 'ACCEPTED'" scope="col" class="regular"></th>
            </tr>
          </thead>
          <tbody class="disputeListScroll scrollbar" id="style-4" infiniteScroll [infiniteScrollDistance]="2"
            [infiniteScrollThrottle]="50" (scrolled)="pageChanged('SAVED')">
            <tr class="montseratFont light font-12" *ngFor="let item of entryArray; let i = index">
              <th scope="row">{{ i + 1 }}</th>
              <td>{{ item.userName }}</td>
              <td>{{ item.dateOfEntry | date: 'longDate' }}</td>
              <td>
                <!-- <a (click)="openModal(template,item.submissionId)" class="pointer"> {{ item.fileName }}</a> -->
                <a (click)="onClickVideo(item.submissionId, item.subCategory, item.categorySubmissionId)" class="pointer"
                  title="'{{ item.fileName }}'">
                  <img alt="File" src="../../../assets/img/movie.svg" class="movieIcon"> </a>
              </td>
              <td *ngIf="status === 'ACCEPTED'">
                <!-- <a (click)="openModal(template,item.submissionId)" class="pointer"> {{ item.fileName }}</a> -->
                <a  (click)="openModal(templatePopup, item.submissionId)" class="pointer">
                  Reject</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </tab>

</tabset>

вызов этого метода с помощью scroll

pageChanged(status) {
this.page++;
this.onLoadData(status);}

при каждом вызове происходит два вызова API для двух вкладок, ожидая только один вызов API на каждую прокрутку на основе активных вкладок

onLoadData(status) {
this.juryService.getEntries(this.page, status, 20).subscribe(res => {
  if (res.response.length > 0) {
    this.entryData = res.response;
    this.entryData.forEach(el => {
      if (this.entryArray.map(ele => ele.submissionId).indexOf(el.submissionId) === -1) {
        this.entryArray.push(el);
      }
    });
  }
});}