I have a website with two pages (A and B). Both have some content which is loaded via renderings. A has a button which opens B in a new tab. A also has some frontend code which calls one of my APIs, which again calls an external API to fetch some data. This data will be displayed on page A. Page B does not rely on that data. All of that happens asynchronously and enables the user to click on the button which opens page B in a new tab.

The problem is although the new tab opens, page B doesn't load until page A has loaded all of the data.

While investigating this problem I figured out that the rendering on page B is not invoking the assigned controller action until the API on page A is done. 

Does anyone have an idea on how to solve it?

I'm using sitecore 9.1.1 and I'm happy to provide any additional information if needed.


----------
EDIT:

This is the controller action for page B which doesn't do a whole lot except reading some fields of the item. This action doesn't get called until the API call is done.
~~~csharp
public ActionResult Dashboard()
{
    Item datasource = RenderingContext.Current.Rendering.Item;
    var viewModel = _clientOverviewService.GetPageBViewModel(datasource);
    return View(viewModel);
}
~~~
The API call basically comes down to this:
~~~
switch (httpType)
{
    case HttpType.Post:
        return await httpClient.PostAsync(uri.ToString(), new StringContent(jsonData, Encoding.UTF8, "application/json"));

    case HttpType.Get:
        return await httpClient.GetAsync(uri.ToString());
        
    ... 
}
~~~
This is the JS code where the API call is made. The `BigApiCallURL` is being transformed to the `uri` variable in the code block above:
~~~js
const axiosInstance = await axiosInstanceGenerator('BigApiCallURL');
const response = await axiosInstance.post('', requestPayload);
~~~