How to conceal sections of a webpage until a child component is successfully loaded with vue

I am currently working on a Single Page Application using Vue. The default layout consists of some HTML in the header, followed by an abstract child component that is injected into the page. Each child component has a loader to display while the data is being fetched from the server and rendered:

<navbar/>
<child id="main-content"/>

Now, I have a requirement to add a footer to each page. However, adding the footer in the parent default layout results in a not-so-pleasant user experience as the footer is shown only after the data is loaded in the child component, following the header and loading icon:

<navbar/>
<child id="main-content"/>
<footer>
Content for my footer which should be hidden until the child component has finished rendering
</footer>

Is there a way to hide the footer in the parent component until the child component has fully rendered its data without needing to modify each child component with $emit? I am looking for a solution that can be applied globally from the parent component.

javascripthtmlcssvue.js

Answer №1

If you're using Vue 2, one option is to incorporate a global event bus.

The concept of an event bus or publish-subscribe pattern enables different parts of your application to communicate with each other.

However, this scenario may indicate a larger issue in how your application manages data. Ideally, all related data should come from the same source. For instance, if both your footer and child components rely on the same data, the parent component should fetch that data and pass it down as props. This approach allows you to manage the loading state for your footer component effectively.

Answer №2

Another great alternative is to leverage the power of Vuex store. By utilizing the store, you can keep track of the API data status effortlessly. With each component having access to the store, there's no longer a need to manually handle communication between components or write scripts to monitor status changes. This scenario perfectly aligns with the intended purpose of Vuex.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble getting Safari to load preflight CORS authentication requests (XHR) in a Vue.js application hosted on Apache?

I've been spending hours researching and trying to debug, but I'm not having any luck. This workflow/request works fine on Chrome, but Safari and Firefox both fail at the OPTIONS preflight request. Safari shows two errors: (!) Failed to load res ...

.htaccessauthenticationsafarivue.jscors

Tips for bypassing an argument using the POST method in NodeJS

Hey there! I started off by creating a question about passing over data using the GET method, but now I'm facing a new problem when trying to pass over data with the POST method. Below is my code snippet where things seem to be going wrong. My goal is ...

javascriptnode.jsexpresspost

Troubleshooting a jQuery Selector Issue with a Dynamic Form

I developed a jQuery function to search for all the necessary inputs in a specific section of a website. function check_property_vars() { jQuery(this).parents('.property_group').find('div[id^="property_group_"]:input[required]:visible&a ...

javascriptjqueryhtmlcss

Generating a constantly evolving 3D model and keeping it current within a web browser

My website already has a large user base, and I am looking to create a 3D visual representation of data on one of the pages. This model needs to be easily updatable based on each user's database information (imagine a square board with a ball whose po ...

javaphpjavascriptflashactionscript

Every time I try to access my website, all I see is the WordPress installation process page

After initially hosting a WordPress website, I made the decision to switch over to SPIP. However, when attempting to access the site on my laptop, it continues to bring up the WordPress installation process. Interestingly enough, the website appears to lo ...

htmlcsswordpresscontent-management-systemspip

Choosing multiple items using ng-checked and ng-model in AngularJS

I am working with an Ionic application and encountering a minor issue, much like AngularJS. <ion-list class="list-inset subcategory" ng-repeat="item in shops"> <ion-checkbox class="item item-divider item-checkbox-right" ng-model="selectAll" ...

javascriptangularjs

A guide on leveraging console.log in Next.js

I'm having trouble displaying the output of an API call using console.log. The issue is that nothing appears in the console (both in the browser and Visual Studio Code). The only console.log that seems to work is within the RouteStatus function, but i ...

javascriptnext.jsconsole.log

In Vue.js, cycle through items and create a new row for every group of 3 items

I am currently working on a code that displays 3 items in each row. <b-container class="tags"> <b-row v-for="index in 3" :key="index"> <b-col> <MovieItem /> </b-col> <b-col> ...

vue.js

Retrieving the <html> tag within an Angular component

In an Angular component, the <body> and <head> tags can be accessed by injecting DOCUMENT as shown below: import { DOCUMENT } from '@angular/common'; import { Inject } from '@angular/core'; export class TestComponent { c ...

javascriptangulartypescript

A mistake occured: Unable to modify the stack property of [object Object], as it only has a getter method

Encountering an error when attempting to use a service in my component and declaring it in the constructor - TypeError: Cannot set property stack of [object Object] which has only a getter This is the code snippet: import { Component } from '@angula ...

javascriptangularangular-services

Ensure that the dynamically inserted <title> tag remains intact in Angular even when the page is re

Can the dynamic title tag be preserved when the page is refreshed? When I refresh the page, the title tag reverts back to the original one specified in the index.html temporarily before switching back to the dynamically added one. I want the title tag to ...

javascriptangulartypescript

Guide to sending parameters to the getInitialProps function in the _app.js file within Next.js by extracting them from the URL

Shown below is the getInitialProps function for my custom MyApp. MyApp.getInitialProps = async ({ctx}) => { const { siteHeaderCollection } = await getHeaderData(ctx.query.lang) const { siteFooterCollection } = await getFooterData(ctx.query.lang) ...

javascriptreactjsnext.js

Troubleshooting jsPDF problem with multi-page content in React and HTML: Converting HTML to PDF

I need to convert HTML content in my React application into a PDF file. My current approach involves taking an HTML container and executing the following code snippet: await htmlToImage .toPng(node) .then((dataUrl) => { ...

javascripthtmlreactjspdfjspdf

What is the most straightforward method to convert a current Express node app into a static site?

After primarily working with React and create-react-app, I've grown accustomed to the convenience of having a build utility for npm that simplifies deploying projects to static web hosting platforms like github pages or surge. This process ultimately ...

javascriptnode.jsexpressherokustatic

Handling a change event for a mat-datepicker in Angular 7 can be tricky, especially when its value is tied to an optional input parameter. Let's dive into how to

I've recently started working with angular development and encountered a challenge with a mat-datepicker. The value of the datepicker is connected to filterDate using [(ngModel)] as an @Input() parameter. I have implemented a handleChange event that e ...

javascripthtmlangulartypescriptdatepicker

Minimize the visibility of the variable on a larger scale

I have a nodejs app where I define global variables shared across multiple files. For example: //common.js async = requires("async"); isAuthenticated = function() { //... return false; }; //run.js require("common.js"); async.series([function () { i ...

javascriptnode.jsuglifyjs2

Creating a cascading select box with two levels in PHP and MySQLExplanation on how to generate a two-tier connected

While I have successfully retrieved values from a MySQL database using a select box in PHP, I am struggling with implementing a two-level chained select box. Does anyone have any sample code or suggestions on how to achieve this? Thank you. ...

javascriptajaxselect

Exploring the power of jQuery and Ajax together

Today seems to be one of those days where even the simplest tasks become a challenge. I'm sorry if this question has been asked before, but I'm struggling with a basic issue. I want to dynamically update text on a website using a text file, and w ...

javascriptjqueryajax

Arranging the data in my JSON reply

{ "JsonResult": { "List": [{ "Subject": "Something", "Type": 0, "TypeDescription": "Referral" }], } } When I hit my service, I receive a sample JSON response. After that, there is a button with ...

javascript

Discover the secret sauce to effortlessly adding text upon hovering over a button

I am completely new to CSS and only know the basics. Recently, I stumbled upon this code online that creates a button. However, I want to use an image inside the button, add a color overlay when hovered, and display text saying "LEARN MORE" upon hovering ...

css