So, I am working with an angular application where I have to fetch data (array of objects) from my backend server (spring boot) and render them as different cards in UI.

Sometimes the data from backend is so huge that the entire application will be in loading state until I receive the observable and get the data out from it.

I know I can implement some lazy loading/loading on demand from making multiple calls to backend based on page number, but my situation is I have custom pipes written in Angular that will filter all the data in UI. If I lazy render the data, the filters wont be applied to data which does not loaded yet.

I need a solution that from the observable, is there any way to get the data in chunks. So on load of first chunk of data, I will render UI and in background I can append the rest of the data to the same variable... For example: If I have 1000 data objects in an array, instead of waiting for all the 1000 objects to get loaded in a component.ts file, I wanted to load first 100, then loading screen will be gone and rest in different parts in background (100 * 10 parts)

Is there any solution for this?