Showing the loading screen while waiting for the static Next.js app to load

Looking for a way to implement a loading screen right before the entire static page finishes loading? I'm currently utilizing modules:export to create my static page, but struggling to listen to the window load event since NextJs has already loaded the window.

I attempted using an external script with next/script, but couldn't quite figure out how to observe it from within the next app.

If you have any suggestions on how to make this work, please share your insights. Thank you!

Just to note, I am working with the App router.

javascriptnext.js

Answer №1

Question :

How can I implement a loading screen that displays before the entire static page loads?

Answer :

First, add a file called loading.js to the root of your project.

Create a file named loading.js (this name follows NextJS conventions, do not change it).

Inside the app\loading.js directory, create the following code in a file named loading.js:

export default function Loading() {
  return <p>Please wait while Loading...</p>
}

For further information, please refer to:

  1. loading.js : https://nextjs.org/docs/app/api-reference/file-conventions/loading

If you have any additional questions, feel free to leave a comment.

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

I am only able to trigger my AJAX request once

Whenever I click on a checkbox, an ajax function is triggered. This function sends a query string to a PHP script and returns relevant HTML. Strangely enough, if I first select a dropdown option and then check another checkbox along with the previous one ...

javascriptajaxjquery

When working with angular.js and angular-sanitize.js, the src attribute is removed from JSON HTML data

I'm new to Angular and I'm really enjoying learning how to work with it. Currently, I have a simple JSON file that contains text structured like this: "gettingstarted":{ "title":"Getting Started", "content":"<img ng-src='i ...

javascripthtmljsonangularjs

Generate a form using code that has the trigger turned off by default

Summary: Looking for a solution to avoid the automatic disabling of a programmatically created trigger in a form. function autoTrigger(e) { var result = {}; var responses = e.response.getItemResponses(); for (var i = 0; i < responses.length; i++) ...

javascriptgoogle-apps-scripttriggersgoogle-forms

Encountering Err_Connection_Refused while working with MVC WebAPI 2 and AngularJS

Seeking guidance on WebAPI, AngularJS, and .NET Authentication, I am currently following a tutorial mentioned HERE. The tutorial is brief (~under 10 mins), but I encountered an error stating Failed to load resource: net::ERR_CONNECTION_REFUSED. Typically, ...

javascriptasp.net-mvcangularjsasp.net-web-api

The React-Leaflet curly braces positioned on the top left corner of the map

Is there a way to remove the curly braces and symbols near the zoom pane when the map is too far? https://i.stack.imgur.com/eGQCd.png p.s. Here is some provided code for reference: p.s. 2 - I have noticed that adding a condition like {condition1 &a ...

javascriptreactjsleafletreact-leaflet

"Incorporate countless Bootstrap 4 carousels into one webpage for an enhanced user

I'm experiencing difficulties with the new Bootstrap 4. Can anyone provide guidance on how to incorporate multiple Bootstrap carousels into a single page? I've researched several websites, but most only offer solutions for Bootstrap 3. Your assi ...

javascripthtmlcssbootstrap-4

What is the best way to choose a specific row with Enzyme?

We have chosen Jest for doing UI Test-Driven Development on our React application. Our component rendering structure looks like this: <Div> <Row> </Row> <ROW> <Row> <ROW> <Link> <Link> ...

javascriptreactjsecmascript-6enzymejestjs

Determine whether there are a minimum of two elements in the array that are larger than zero - JavaScript/Typescript

Looking for an efficient way to determine if there are at least two values greater than 0 in an array and return true? Otherwise, return false. Here's a hypothetical but incorrect attempt using the example: const x = [9, 1, 0]; const y = [0, 0, 0]; c ...

javascripttypescript

Issue with multiple dropdown menus not closing when clicked on

The current implementation provides the functionality to convert select boxes into list items for styling purposes. However, a drawback of the current setup is that once a dropdown is opened, it can only be closed by clicking on the document or another dr ...

javascriptjqueryhtmlcss

Is it necessary to have the script tag as the first tag in the body of the HTML?

I have a script file that needs to be included by third party implementors on their web pages. It is crucial for this script to be the first tag within the body element, like so: <body> <script type="text/javascript" src="/my_script.js"></ ...

javascript

Steps for adding a row as the penultimate row in a table

There aren't many solutions out there that don't rely on jQuery, but I'm looking to avoid it. The row content needs to be generated dynamically. Here is my flawed approach: function addRow() { let newRow = '<tr><td>B ...

javascripthtmlhtml-table

Is there a way to verify and send notifications when duplicate entries are added to my table?

Whenever a make and model are added using the "add" button, I need to ensure that there are no duplicates. If a duplicate is found, an alert should be displayed, and the entry should not be added to the table. Unfortunately, I have been unable to find a so ...

javascriptjqueryhtmlcssangularjs

What is the best method to invoke an authenticated HTTP trigger Google Cloud Function from a Next.js (with Typescript) application?

After setting up a Google Cloud Platform account, I created a basic Python "Cloud Function" that outputs simple text. This function is accessible via HTTP and can only be authenticated by a specific "Service Account" that I generated for this purpose. To e ...

reactjsgoogle-cloud-platformnext.jsgoogle-cloud-functionsgoogle-authentication

I'm having trouble accessing the outcome from within the function

Having trouble getting the result to return inside a function for my basic rock paper scissors game. I've tried everything, including console logging the compare and putting it inside a variable. Strange enough, console.log(compare) is returning und ...

javascriptfunction

Merging data sets with Javascript: A comprehensive guide

As a newcomer to the world of javscript, I'm faced with what seems like a simple question. I'm working with two datasets that contain a common column and I'd like to merge them together. The structure of the datasets is as follows: const da ...

javascriptjoinmergedataset

Add a plethora of images to the canvas

Just starting out with Fabric.js and trying to figure out how to draw a picture on the canvas after a drop event. I managed to do it once, but am struggling with inserting more pictures onto the canvas (each new drop event replaces the previous picture). ...

javascripthtmlcanvasfabricjs

What is the best way to display text from a file on a different html page using jQuery's json2html?

Here is the json data: var data = [ { "name": "wiredep", "version": "4.0.0", "link": "https://github.com/taptapship/wiredep", "lice ...

javascriptjqueryhtmljsonjson2html

After integrating Redux into React, the map(item) function is unable to send "item" as props to a JSX component

Currently, I am working on integrating Redux into my React application. As part of this process, I have developed four actions to manage the "items" in my application. The initial three actions, namely GET_ITEMS, DELETE_ITEM, and ADD_ITEM, function seamles ...

javascriptreactjsreact-nativereduxreact-redux

Error encountered while using Google Translate with XMLHttpRequest (Missing 'Access-Control-Allow-Origin' header)

Trying to access a page that utilizes Google Translate is resulting in the following error: XMLHttpRequest cannot load http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit. No 'Access-Control-Allow-Origin' heade ...

javascriptjqueryjsoncross-domaingoogle-translate

Tips for extracting data from a JSON file

I'm attempting to retrieve a list of music genres from my json file using PHP and JQuery ajax. Here is the format of my json file [ "12-bar blues", "2 tone", "2-step garage", "4-beat", "50s progression", "a cappella", "accordion", " ...

javascriptphpjqueryjsonajax