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

How to dynamically generate Angular component selectors with variables or loops?

Looking to dynamically generate the Selector Tag in my app.component.html using a variable. Let's say the variable name is: componentVar:string What I want in my app.component.html: <componentVar></componentVar> or <app-componentVar& ...

javascriptangulartypescriptfrontend

AngularJS is throwing an error stating that the URL ID is undefined

I am developing an application that utilizes angularjs with codeigniter as the backend. Within my URL, I have http://localhost/submit/1234, with 1234 serving as the ID. Within my angularjs setup: var singlepost = angular.module('singlepost', [ ...

javascriptphpangularjscodeigniter

A URL that quickly updates live content from a backend script

As a beginner, I am seeking guidance as to where to start on my journey of learning. I need assistance in creating a script that can efficiently fit within a small URI space and constantly updates itself with information from a server script. My target bro ...

javascriptjqueryajaxmonolinden-scripting-language

Relocating to reveal or conceal item

I am currently working with jQuery and trying to achieve a specific functionality. My goal is to hide and unhide an element, while also focusing on the exposed area once it becomes visible. I have a link #welcomeselect that, when clicked, should reveal t ...

javascriptjquery

Navigating directly to a page in ReactJS and Redux without needing to login if a token is found in the local storage

Currently in the main component, it is set to automatically redirect to the Login page. However, I want to implement a check to see if a token is already stored in the local storage. If a token exists, I want the application to skip the Login page and dire ...

javascriptreactjscookiesreduxreact-redux

Merging RXJS observable outputs into a single result

In my database, I have two nodes set up: users: {user1: {uid: 'user1', name: "John"}, user2: {uid: 'user2', name: "Mario"}} homework: {user1: {homeworkAnswer: "Sample answer"}} Some users may or may not have homework assigned to them. ...

javascriptangulartypescriptrxjsobservable

What's the best way to pass parameters through Higher-Order Components in React?

my custom component App import React, { Component } from "react"; import City from "./City"; import withDataLoader from "./withDataLoader"; const MyApp = () => { const MyCity = withDataLoader( City, "https://5e5cf5eb97d2ea0014796f01.mockapi ...

javascriptreactjs

How can I use JQuery to enable or disable checkboxes upon loading?

I am looking to implement a feature where the checkboxes are enabled when the .group is checked and disabled when it is unchecked. Although I can toggle between them, I'm facing difficulty in disabling the unchecked checkbox using the .group. Upon lo ...

javascripthtmljquery

Find the identifier that does not currently exist in the collection of objects

There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...

javascripthtmlangulartypescript

Unable to adjust the width of a table column within a horizontally scrollable container

I am struggling to resize the columns of a large table with 20 headers. Despite trying to place the table inside a div with overflow:auto, I still cannot achieve horizontal scrolling or make the div expand when resizing the columns. A sample code snippet ...

javascriptcssvue.jsresizescrollable

Is it possible to display a title tooltip only when the CSS ellipsis feature is active in a React component?

Issue: I am trying to find a neat solution to display a title tooltip on items that have a CSS ellipsis applied, within a React component. Approaches Attempted: I created a ref, but it only exists after componentDidUpdate. Therefore, I force an update w ...

javascriptreactjs

The error message "User is not a constructor in Express when using Passport"

I encountered an issue while trying to set up registration in Express using passport.js. After submitting the form, the server console displayed the following error: POST /user/register 500 62.273 ms - 2008 TypeError: User is not a constructor at /mea ...

javascriptnode.jsexpresspassport.jsmean-stack

The assertion that 'd3Ctrl' is not a valid function, but instead is undefined

Although several people have raised the same issue before and I've attempted their solutions, I still can't seem to resolve it. My problem involves using d3, but I keep encountering this error: app.js var app = angular.module('myApp', ...

javascriptangularjsd3.jsng-controller

"Utilizing jQuery to generate select boxes with the ability to include multiple selection options

Welcome! I have posted some HTML and jQuery code that uses JQuery 1.9.1. CODE SNIPPET $(document).ready(function () { $('#search').keyup(function () { var search = $('#search').val(); if (search.length > 2) { ...

javascriptjqueryjquery-ui

Switching the default z-index for child elements within an HTML container

According to the specification, elements are typically drawn "in tree order" for in-flow, non-positioned elements of similar block level or float status and identical z-index. This means that elements declared last in the HTML markup appear on top. But wha ...

javascripthtmlcssz-index

In JavaScript, capture data returned from a function in a separate variable using a POST REST API call

So, here's the deal - I've got this awesome code that does a POST to an API in order to fetch some data. The best part? It works like a charm when it's wrapped up neatly in a function. But now, the tricky part comes in. I need to actually re ...

javascriptnode.jspost

Exploring the capabilities of AngularJS for efficient testing using Jasmine alongside mixpanel integration

Within my AngularJS application, I implement MixPanel for analytics by using the asynchronous script in my index.html file. index.html <script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;a=e.createElement("script ...

javascriptangularjsmixpanelkarma-jasmine

Changing the prototype of a generator function

TL;DR I am looking to enhance a generator function instance by adjusting its prototype, specifically the object received when calling a function*. Imagine I have a generator function: function* thing(n){ while(--n>=0) yield n; } Next, I create a ...

javascriptnode.jsecmascript-6generator

Mastering objectFit with Next.js 13: Unleashing the Power of <Image>

Within the latest version of next/image documentation, specifically version 13.0.0, it indicates that certain props such as layout, objectFit, objectPosition, lazyBoundary, and lazyRoot have been removed. The documentation for fill in the next/image sect ...

imagenext.jsobject-fit

The response data from Axios remains undefined even after a successful request

function verifyPassword() { let pass = document.getElementById("password").value let emailAddr = document.getElementById("email").value Service.confirmLoginPassword(emailAddr, pass).then(response => { result = re ...

javascriptreactjsaxios