RxJs Observables and Subjects resolving async process times when browser is in focus

I'm a bit new to Angular and have forked a complex project that in a subscription to a websocket, uses Observables, Subjects and ReplaySubjects altogether to achieve a function that I summarize here:

1. The UI requests new data to the websocket, emitting a message with a defined callback method.
2. The subscription service, processes the request and send the RPC through the websocket.
3. Upon receiving the new data, the subscription updates a state variable which holds all latest data to display, triggers the callback and emits the next event on an observable/subject chain of events.

Now, the subscription is paginated, so I want to request all items page by page, using this observables and when all pages are locally available, download to a CSV file. I use something like:

for (let i=0; i<totalPages; i++){
const pageData = await (this.subscriptionService.getNextPageAsync(page+i).toPromise());
allPageData.extend(pageData);
}
return allPageData;


The code works fine, but while getting around 6000 rows in pages of size 50-3000 (tried many values), the observables seem to hang ocassionally, without reason, and take several seconds (up to 80 seconds!) to retrive a page (that the backend dlivers in less than 300ms). But if I leave the browser screen, or switch tabs, suddenly all pages are loaded ASAP without delay.

I am at a loss as to where to look around, what might be the reasons for observables/subjects to tick/hang around with the Angular UI refresh ticking/cycle? Any clues as to where to look around? I know a ChangeDetectorRef is used to trigger ui refreshes, but in this case, there's just background data being received.

Note: I tried using concat to execute pagination sequentially in an array but the process is complex and I would like to understand why this might happen

Continue reading...