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

The close menu button is not functioning properly when clicked outside the menu - the buttonevent.matches is not recognized as a

I am encountering an issue with the dropdown menu that is not closing when clicking outside of the menu button. Despite having faced this problem before, I can't seem to find a solution now. Any help would be greatly appreciated as I am uncertain why ...

javascripthtmlcssdropdown

What is the best way to ensure consistent code placement at the bottom of my Django Template using inheritance?

Lately, I've been working on incorporating a footer into my layout.html file that is inherited by all other pages within my Django project. I am aiming to create a footer that remains fixed at the bottom of every webpage just like how Stack Overflow ...

htmlcssdjango

Can the grid system dimension be customized in Vue?

Does Vue always use a 12-grid system, or can the grid dimensions be adjusted to accommodate different numbers of grids? ...

vue.jsgridvuetify.js

Is it feasible to activate a function when certain Vue data elements are altered?

Looking to monitor a set of data elements for changes and then save them in localStorage. Is there an easy way to achieve this? ...

javascriptvue.js

The function Getter is expected, but an error has occurred with "getters.doubleCounter" returning a value of 20 in VUEX

Currently, I am diving into the world of Vuex and encountering some challenges along the way. In my attempt to create a getter on my vuex instance, I am facing an error when trying to display data from one of my components: The getter should be a functi ...

javascriptvue.jsvuex

React is throwing an error: Uncaught SyntaxError stating that import declarations are only allowed at the top level of a module. This issue is coming

I encountered an issue where I received the error message: Uncaught SyntaxError: import declarations may only appear at top level of a module on index.js sometimes en index.css or bundle.js Despite this error, my App is not rendering and the div with id=& ...

javascriptreactjsreact-hooks

Having trouble with the border styling on my HTML input form

I've been struggling to add a solid black border around the text input in my form. However, no matter what I try, the border doesn't seem to style correctly. Here's the code snippet I'm using: #forminput { border: solid black !import ...

htmlcss

Issue with Next.js hook: Uncaught TypeError - Unable to define properties of undefined (setting 'type')

Encountered an error while attempting to build my nextjs app. Strangely, this error wasn't present in the previous version of the app. I didn't make any changes to the config files, just added a few animation libraries and that's all, along ...

javascriptreactjstypescriptwebpacktypes

Is it better to apply the font-family to the body or to the html element?

Is it more appropriate to specify the font-family CSS property on the html element or the body element? html { font-family: sans-serif; } or body { font-family: sans-serif; } I've looked into this issue online, but there doesn't seem to ...

htmlcss

Navigating through the complexities of scoping in JavaScript when integrating Node.js

Currently, I am working on an express.js application without using mongoose. My goal is to create a function that can handle calls to MongoDB, pass parameters to it, and retrieve data from the database. However, I have encountered a problem with the foll ...

javascriptnode.jsmongodbexpress

Internet Explorer does not recognize the specific CSS code

My goal is to create a website that behaves differently on Internet Explorer browser. I am attempting to achieve this by using a separate CSS for IE and another CSS for different browsers. However, the IE-specific CSS does not seem to be working. <h ...

htmlcssinternet-explorerinternet-explorer-8

"Using a CSS pseudo element to create stylish separators between elements

Can CSS pseudo elements :after or :before be used to clear floats between elements? If not, what other method can be used to clear floats between <div class="float"> and <section class="inner">? The HTML and CSS structure is as follows: * { ...

htmlcss

The React.js project I created is showcased on GitHub pages and has a sleek black design

After developing a project using React.js and deploying it on github pages, everything was functioning smoothly. However, I encountered an issue where the screen turned black after logging in and out multiple times. Are there any suggestions on how to reso ...

javascriptreactjsjsongithubgithub-pages

Determine the current position of the cursor within a contenteditable division

I came across this code snippet on a forum to determine the cursor position in a contenteditable div, but unfortunately it consistently returns 0. Here is the function responsible for retrieving the cursor position: new function($) { $.fn.getCursorPo ...

jqueryhtmlcontenteditablecaretcursor-position

The division of columns in the Bootstrap grid is malfunctioning

Recently, I embarked on my journey with Bootstrap and encountered an issue with the Grid Col System. I am aiming to center the logo and navigation bar on the page by dividing the Grid layout into 4 col-lg-4 (md-4). Subsequently, I inserted the image and na ...

htmlcsstwitter-bootstrap

Run a Python script to capture mouse coordinates using Selenium

Greetings, I am currently utilizing selenium webdriver to retrieve the X,Y coordinates of the cursor at a specific moment on the webdriver screen. However, I am facing challenges with the implementation of a method that involves using driver.execute_script ...

javascriptpythonpython-3.xselenium

JavaScript - Modifying several object properties within an array of objects

I am attempting to update the values of multiple objects within an array of objects. // Using a for..of loop with variable i to access the second array and retrieve values const AntraegeListe = new Array(); for (let i = 0; i < MESRForm.MitarbeiterL ...

javascriptarraystypescriptobjectforeach

How to stop Backbone.js from changing the URL hash when navigating back and forth

I have been working on developing a simple Single Page Application (SPA) using Backbone.js. In my application, I am facing challenges with two specific routes: the index route ("/#index") and the menu route ("/#mainmenu"). The general flow of my app is as ...

javascriptbackbone.jsurl-routing

adding a new div to the bottom of a row that is being created on the fly

I encountered an issue where rows are created dynamically and I needed to add a div at the end of each row. Despite trying various methods, I faced difficulties as adding the div resulted in extra divs being added to all previous rows whenever a new row wa ...

javascriptjqueryhtmlcss

Is it possible to load multiple angular applications within a master angular shell application?

I am searching for a method to integrate multiple Angular applications into a single shell Angular application. The concept involves having different teams develop separate Angular apps that can be loaded within a main shell app visible to end users. Thi ...

javascriptangularjsextjs