I have an SPA using Vue with the default layout being some html in the header, followed by an abstract child component which gets injected into the page. Each of the children has a loader so that while the page is loading, the user sees the header html, and the loading icon is presented while the child is fetching data from the server and rendering it:
<navbar/>
<child id="main-content"/>
I now need to add a footer to each page. However, it doesn't look so good as adding the footer in the parent default layout results in the header being shown, then the loading icon, then the footer which ultimately gets pushed down only after the data is fetched from the server within the child:
<navbar/>
<child id="main-content"/>
<footer>
Stuff in my footer that should not be shown until the child component is completely loaded
</footer>
Is there a way to hide the footer in the parent component until the child has rendered all of its data? I'm hoping for a solution that can be implemented once from the parent without having to add $emit to each of the children.
If you are using Vue 2, you could implement a global event bus.
The event bus / publish-subscribe pattern is a way of getting unrelated sections of your application to talk to each other.
Although, this question seems to expose a bigger issue in your application's data management. To my understanding, all data that is dependant should be coming from the same section. For example, if your footer and child component have a dependency on another, then the parent should fetch the data for the child and pass that data in as props. This way you can handle the loading state for your footer component.
Another additional option to above is to use Vuex store, that will know the status of the API data. Each component can have access to the store. This will give you freedom from the need to communicate the fetched data status between the components, or to write any script that checks the status. This looks like a good case Vuex was made for.