I need to show updated data on this particular page without refreshing. I am using rxjs method to call data every 2 seconds. It’s working Great.

However, I noticed that my Chrome network resources is increasing by the minute. It started from somewhere around 3mb to 34mb within a few minutes. See screenshot.

Is this a normal behaviour? I have to keep the browser open for 8+ hours and looking at this, the resources will increase to a few hundred+ MBs.

How do I decrease the resources being taken by this?

This is my HTML file:

<div *ngFor="let item of currPatients">
  <div *ngIf="item.isQueue !== false">
    <div class="col">
      <strong>{{item.sequenceId}}</strong>
    </div>
    <div class="col">
      {{item.registration.registrationId}}
    </div>
    <div class="col">
      {{item.registration?.firstName}} {{item.registration?.lastName}}
    </div>
    <div class="col">
      {{item.date | date: "dd MMM, yyyy '/' hh:mm a"}}
    </div>
    <div class="col">
      {{item.isQueue}}
    </div>
  </div>
</div>

This is my TS file:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Opd } from 'src/app/interfaces/opd';
import { CoreService } from 'src/app/services/core.service';
import { interval, Subject, Subscription } from 'rxjs';
import { switchMap, debounceTime, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit, OnDestroy {
  public currPatients: Opd[] = [];
  public opd = {} as Opd;
  private pollingSubscription!: Subscription;
  private destroy$ = new Subject<void>();
  constructor(
    private coreService: CoreService,
    private router: Router,
  ) { }

  ngOnInit(): void {
    this.startPolling();
  }

  ngOnDestroy(): void {
    this.destroy$.next(); // Signal the observables to complete
    this.destroy$.complete(); // Clean up the subject
  }

  private startPolling(): void {
    this.pollingSubscription = interval(2000).pipe(
      debounceTime(1000), // Optional: Add debounceTime to reduce rapid emissions
      switchMap(() => this.coreService.getOpdsbyQueue()), // Automatically cancel previous request
      takeUntil(this.destroy$) // Automatically unsubscribe when destroy$ emits
    ).subscribe({
      next: (res: any) => {
        this.currPatients = res.data;
      },
      error: (err) => {
        console.error('Error fetching patients', err);
      }
    });
  }
}