Control lightning components loading in Community Builder like load one component after another in order

Question

In Community Builder or Lightning App builder, we place our individual components in the provided custom layout sections to make a one complete page. When this page is loaded each components loads on it own. For example we have two components on the page and say component-1 is taking more time to load than the component-2. Now here component-2 is displayed first on the screen/page and then component-1 after its loading complete. My requirement is to display component-1 first and then the component-2. (Displaying both of them at the same time also works for me). Question is can we control the loading of components like load first component-1 and then component-2.

Answer 1

Lets say you have 3 components on the page like below

<c:c1/>
<c:c2/>
<c:c3/>

You want to load component C1 first and then C2 and C3.

Run init of all 3 and do whatever data manipulation you want, but hide the content using CSS(display:none).

Once the first component loads fire an event which will be handled by c2 and c3 and they will toggle the visibility.

This way all the components will be loaded and at the same time the component you want to show first in UI will control the visibility of 2 and 3.

Answer 2

You can do this via Application Events .

You will need to emit an application event from the component that you want to first load and handle the event in the second component and then based on the event you will call the controller method function that you would have called on the init .

Overall its gono slow down the loading but you can add some UX like loading spinner to show component is still trying to fetch data