如何在后台预加载数据（Angular Web App）

Question

Our (Angular) app uses ~15 APIs to get data from the backend. Each API is used to get data for a specific page. The APIs are not very fast unfortunately, some of them take 5-10 seconds to return. The amount of data that we get is about 1 MB for all pages. Some pages might not be used every day but several of them are guaranteed to be used all the time.

Considering all of these, I am thinking to preload (almost) all the data in the background when the app starts, so when a page is loaded we won't wait for 5-10 seconds for the data.

The way I am thinking to do that is: when the app starts, wait for 10 seconds or so and then call all the APIs and save the data in the store (NGRX). However I have a few questions:

1. When the app starts, it displays Page-1 which starts getting Data-1 using API-1. Sometimes this request takes more than 10 seconds, and the Get-Data-In-Background kicks in and it calls API-1. The previous call for API-1 is canceled (by the browser) and now we wait 10 more seconds for Data-1 to be retrieved. Is there a way to specify "do not cancel a previous request if there is one"?
2. Currently we get approximative 1MB of data. If, I don't know for what reason, in the future the app will get a lot more data (1GB) from the backend, is the browser smart enough to handle big data by saving/loading it from the disk? Or we will get into an out-of-memory situation?
3. Is that the right way to pre-load data?

Answer 1

I ended up implementing a 'can-load-in-the-background-trigger' (Subject) that is triggered by each page after it received the data. Only when this trigger is true I start loading the rest of the data in the background.

This way I mitigated issue-#1, but I would still like to get some answers if possible.