Learn how to display a loading message instead of a blank page while your Vue.js application is loading

Whenever a new Vue.js page is accessed, there is a brief moment where a blank, white page is displayed until the entire application finishes loading. I have attempted multiple times to display a loading message first using the traditional method, but even that message takes some time to appear and replace the blank page.

<div id="app">
    <template>
  <div id="app">
    <v-app>
      <navbar></navbar>

      <v-content class="mx-sm-12 mt-8 mx-1">
        <router-view />
      </v-content>
    </v-app>
  </div>
</template>

<script>
import navbar from "./components/navbar";

export default {
  components: {
    navbar
  }
}
</script>

Answer №1

Make sure your HTML is downloaded and rendered first. It is recommended to include a loading indicator in the index.html file.

Once the JavaScript (Vue built file) is downloaded, it will replace the <div id="app"></div> in your index.html.

To handle this loading process, you can structure your index.html as follows:

<html>
<head>
   ...
</head>
<body>
<div id="app">
    <div id="loading__container">
       <div>Include loading animation and text here...</div>
    </div>
</div>
<style>
#loading__container {
    // Add your animation styles here
}
</style>
<script type='text/javascript'>
    var loading = document.getElementById("loading__container");
    // ... Perform actions with the loading container
</script>
</body>
</html>

Answer №2

Learn HTML

<div id="application"  v-cloak></div>

CSS Tip: Incorporate the following styles into your CSS stylesheet

[v-cloak] > * { display:none }
 [v-cloak]::before { content: "Please Wait…" }

Consider using an animated gif instead of displaying the text 'loading'.

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

Retrieve the jQuery widget instance by selecting an element within the widget

I am currently developing a widget using the Jquery widget factory. The abbreviated version of the code looks something like this: _create: function(){ this.element.hide(); //hides original input element this.newInput=$("<input>"); //creates ...

Configuring OIDC for a backend API and frontend single-page application

Currently, I am working on a project that involves a Django backend with Django Rest Framework serving an API, and a Vue.js frontend SPA consuming the API. However, I seem to be encountering some CORS issues related to authentication. To implement the Aut ...

Looking to incorporate an additional column 'LastName' that can be used for filtering in the Angular data table code. This column will be included if it is present in the data

function applyFilter(filterValue: string) { filterValue = filterValue.toLowerCase(); --- return filtered result return this.dataSet.filter( (item: any) => item.name ? item.name.toLowerCase(). ...

Encountering a problem involving the apostrophe character "'" when trying to save content into a MySQL database

I have been developing an application that allows users to create HTML templates and save them. Users can utilize different components such as text, images, etc. to build HTML pages. Challenge: The issue I'm encountering is when a user inputs text wi ...

accessing the offsetTop property of React elements

When working in React, I've noticed that the offsetTop value of an element differs between componentDidMount and componentDidUpdate. This is surprising to me because I believed componentDidMount occurs after render, meaning the DOM elements should be ...

Effortlessly moving through each day on Fullcalendar by utilizing the resourceTimeline feature

I have been using the Fullcalendar plugin and I am wondering if there is a way to navigate from day to day instead of in 3-day increments when using the resourceTimeline view with a duration set to 3 days. Thank you calendar = new FullCalendar.Calendar(ca ...

Navigating within a React application - rendering JSX components based on URL parameters

As I work on developing a web-app with a chapter/lesson structure, I have been exploring ways to handle the organization of lessons without storing HTML or React code in my database. One idea I had was to save each lesson as a .jsx file within a folder str ...

React redux - unable to load store without encountering any errors

I am currently working on a project inspired by the code example in the Learning React book, which focuses on using react redux and react router for a single page application. You can find my project here, where I have tried to replicate the example. To r ...

When using `parseInt` on the string "802.11 auth", the result did not match my expectations

I am developing a data parser that transforms the output of a command into a JSON object for sending to a live logging and graphing platform. All data extracted by the parser is returned as strings, but I need numerical values to be preserved as numbers. H ...

What could be causing NVM (for Windows) to malfunction and consistently display error messages every time it is executed?

After attempting to install nvm on my Windows system using https://github.com/coreybutler/nvm-windows, I encountered an error message when running the nvm-setup. Despite reinstalling nvm, resetting the PATH environment variable, and trying to install vers ...

accurate JSONP reply

Currently, I am experimenting with JSONP locally to receive a correct response and pass it into my callback function jsonp_callback. I am referencing code from: How do I set up JSONP? header('content-type: application/json; charset=utf-8'); $dat ...

Issue with AJAX show/hide causing scrolling to top

I've implemented ajax show hide functionality to display tabs, but whenever I scroll down to the tab and click on it, the page scrolls back to the top. You can check out the example code in this fiddle: http://jsfiddle.net/8dDat/1/ I've attempt ...

Ways to retrieve all elements based on their class names?

What is the equivalent of using $('.class') in JQuery to get all elements by class name with pure JavaScript? ...

Issue with TypeORM @BeforeInsert causing a field in Entity not to be populated with value

Currently, I am facing an issue where I am attempting to update or insert into a token field before the record is saved. However, when utilizing the @BeforeInsert hook, I encounter the following error: "error": "Cannot read property 'co ...

Building a collapsible toggle feature with an SVG icon using HTML and CSS

I am trying to swap a FontAwesome Icon with a Google Materials SVG Icon when a collapsible table button toggle is pressed (changing from a down arrow to an up arrow). I have been struggling to get the Google Material Icons code to work. How can I resolve t ...

Creating a dynamic star rating system using CSS

A unique code pen project showcasing a pure css star rating interface can be found at: https://codepen.io/yaworek/pen/JJpEaZ Below is the custom css part: /*** * Custom Pure CSS Star Rating Widget for Bootstrap 4 * * www.TheMastercut.co * ***/ ...

I am struggling to grasp the concept of how the g flag in JavaScript's string.match(regexp) method operates

In the JavaScript book "The Good Parts", there is an explanation of the method string.match(regexp): The match method works by comparing a string with a regular expression. Its behavior varies based on whether or not the g flag is present. Without the g ...

Why does the AngularJS ngRepeat filter permanently remove null values?

Check out this JSFiddle demonstration I created to illustrate the problem: http://jsfiddle.net/s6Lj2/2/ Observe that in the dataset $scope.places = [{ name: 'Chicago', status: 'Active', analyst: 'Sam', recor ...

Anticipate feedback from Python script in Node.js

I have developed a website using nodejs and express, but I am facing an issue with integrating a python script for face recognition. The problem lies in the fact that when I invoke this script from nodejs using child-process, it takes around 10 to 20 secon ...

I seem to be having trouble with jQuery. Every time I try to submit my form, nothing happens

I am currently working on creating a web page for a numerical game, but I am facing difficulties with my jQuery implementation. Despite checking all my placements, nothing seems to happen when I click on the Submit button. Any assistance would be greatly a ...