I've come across similar threads, but I have yet to find a suitable solution for my specific issue.
Situation: Currently, I'm navigating on both the server side and client side simultaneously. This entails that every frontend navigation using routerLink triggers an HTTP request call to the server alongside any route accessed.
Scenario: While in the process of opening a dialog to create a position, I need to display a list of elements fetched from the API. Each element also requires loading an additional thumbnail. This involves one API call to retrieve 86 elements followed by 86 requests for their respective thumbnails. To prevent redundant calls, I store these elements in a service and check for existing elements before making new requests. The API calls are initiated upon opening the dialog.
getElementsWithThumbnails() {
if (this.elementsSource.value.length === 0) {
this.apiService.getElements().subscribe(
(next) => {
this.elementsSource.next(next);
this.elementsSource.value.forEach((epl, index) => {
const format = 'JPG';
this.apiService.getThumbnail(epl.id, format, '400', '400', 'true').subscribe(
(blob) => {
epl.thumbnail = blob;
}
);
});
}
);
}
}
ThumbnailRequestMethod:
getThumbnail(
elementId: string, format: string, width: string,
height: string, sameratio: string
): Observable<SafeUrl> {
return this.httpClient.get(
this.apiUrl +
`/elements/${elementId}/thumbnail?format=${format}&width=${width}&height=${height}&sameratio=${sameratio}`
, {
responseType: 'blob'
}).pipe(
map(res => {
return this.blobToSanitizedUrl(res);
})
);
}
Issue: An obstacle arises when a user chooses to cancel the form and attempts to navigate backward or forward - they encounter a delay due to the pending navigation request.
Is there a method available to assign a lower priority to the thumbnail calls for smoother handling under less load?
Your insights are greatly appreciated.