Investigate if the recursive fetch function paginatedFetch can be stopped midway

[hoanphungt]

For example, while loading locations of a timeseries, I don't want to wait for the locations to be loaded anymore but click on another timeseries/another tab, I want to be able to stop the paginatedFetch function at that moment.

Another example is when open the timeseries selection modal, the modal will be busy loading the timeseries. If the modal is closed while loading (by using ESC key), then the fetch request for timeseries will be aborted.

How to test:

• Open the timeseries tab of the lizard-catalogue
• Choose a Monitoring network and quickly change the selection to another monitoring network while the map is still busy loading --> it will stop fetching for locations and observation types of the selected monitoring network
• Select the Large N&S Sample monitoring network and open the timeseries modal. While the modal is still busy fetching, use ESC to close the modal --> it will stop fetching timeseries of the Large N&S Sample MN

[hoanphungt]

It is possible to stop the recursive fetch function by using the AbortController instance to give signal to the fetch function. This way when the component unmounted, we can call the abort function from the AbortController instance to cancel the fetch request.

An example is done for the paginated fetchTimeseries call when open the timeseries modal. If the timeseries modal is closed while timeseries is being fetched then the fetch request will be aborted.

Steps to test:

• Open the catalogue -> timeseries tab
• Choose Large N&S sample monitoring network
• Open the timeseries selection modal under the Action tab
• Open the Network tab, while the modal is busy loading the timeseries, close the modal using ESC key
• Check in the Network tab and see if the timeseries API request has been cancelled

Currently, this is only needed when fetching timeseries, locations and observation types of a monitoring network.

[hoanphungt]

@Derryrover Hi Tom,

I think this is quite interesting for you to look at. For the recursive paginated fetch function that I made, sometimes I want to stop the recursive fetch function when the component unmounted. I achieved this by using the AbortController instance from JavaScript. It is documented here in MDN: https://developer.mozilla.org/en-US/docs/Web/API/AbortController.

PR: https://github.com/nens/lizard-catalogue/pull/296.

What do you think?

Kr, Hoan

[lexvand]

Tested on staging. Active request is indeed canceled and the console logs a message: User aborted a request.