Multiple http callout lightning components on one page loading synchronously

Question

Bottom line I want multiple lightning components on a single page to load asynchronously, and it appears they are not, described in detail below

Ok so heres the situation, I have a page that has multiple lightning components, each of which makes a separate http callout to an api , each getting different data, displayed in graphs or tables for a dashboard look. The http callout class is reused by all of the lightning components.

I was testing the speed of the page load, and it seemed slow, and i noticed all of the lightning components were loading their data at once, which points to synchronous rather than asynchronous. Some queries the lightning controllers execute to the http callout a faster than others, so I would like the faster queries to render and not wait for the entire page to load

I also expected each lightning controller to make its own call , it appears in the network tab in chrome tools that all of the lightning components are lumped into one distinct call for 5 separate components, the response for all components are aggregated in the one network call response

/aura?r=37&ax_dv_httpcallout.getCalloutResponseContents=6&BaseListView.getRecordLayoutComponent=2

Here is an example of the lightning component, the only difference is the iteration code field values or display

<aura:component controller="ax_dv_httpcallout" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >

<aura:attribute name="response" type="Map"/>
<aura:attribute name="recordId" type="Id" />

<aura:handler name="init" value="{!this}" action="{!c.getResponse}"/>
            <aura:iteration items="{!v.response.data}" var="data">
                <tr scope="row"> 
                    <td>{!data.stage_desc}</td>       
                    <td>{!data.proposal_amount}</td>
                </tr>
            </aura:iteration>
</aura:component>

Heres an example of my lightning component js controllers, for my multiple components, theyre exactly the same except for a param passed for which method to use

Component js

({

    getResponse : function(component) {
        // call webservice class, using parameters to get results
        var action = component.get("c.getCalloutResponseContents");

        action.setParams({
            recordId: component.get("v.recordId")
          , methodURL: "url_part_for_method" //different for each component
        });

        action.setCallback(this, function(response) { 
              var state = response.getState();
           if (state === "SUCCESS") {
               var returnValue =response.getReturnValue();
                component.set("v.response", returnValue );
               console.log(returnValue);
           }

        });

        $A.enqueueAction(action);
    }
})

and my single http callout class is generic, if it needs to be posted let me know

am i running into some weirdness as far as the variable names? or that I'm using the same callout class? or that ive specified that the components are global?

any information or discussion is welcome

Answer 1

The calls themselves are asynchronous, but actions queued around the same time all go to the server at once, which are then processed in order, as outlined in posts like this one, and mentioned in Queueing of Server-Side Actions. You might want to set some of the actions as background actions to improve performance.

action.setBackground();

Foreground and Background Actions states the following note, though:

Don’t rely on each background action being sent in its own request as that behavior isn’t guaranteed and it can lead to performance issues. Remember that the motivation for background actions is to isolate long-running requests into a separate request to avoid slowing the response for foreground actions.

So, for the API calls you expect to take longer, move them to background actions to allow the smaller components to load faster.