Is my webpage loading even as the spinning wheel is being displayed?

This is the App.js

import Newhome from './COMPONENTS/Newhome';
import HashLoader from "react-spinners/HashLoader";
import { useState ,  useEffect } from 'react';
import "./App.css";

function App() {
  const [loading, setloading] = useState(false);
  useEffect(() => {
    setloading(true);
    setTimeout(() => {
      setloading(false);
    }, 1785);
  }, [])
  return (
    <>
      {
        <>
          {
          loading ?
            <div className="App">
              <HashLoader className='loader' color={'#FF5757'} loading={loading}
                size={120} />
            </div>
            : (<Newhome />)
          }
        </>
      }
    </>
  );
}

export default App;

I am uncertain if the website loads while the spinner is displayed. It seems like the spinner only appears for a few seconds before the complete website loads.

What exactly is happening in this code?

Check out my website here: My website

Answer №1

Implementing effective runs after the rendering process is crucial. Displaying a spinner before the website loads may not be the most optimal approach. Consider utilizing code splitting instead:

import React, { Suspense } from 'react';

import HashLoader from "react-spinners/HashLoader";
const Newhome  = React.lazy(() => import('./COMPONENTS/Newhome'));

function App() {
  return (
    <div>
      <Suspense fallback={<HashLoader/>}>
        <Newhome />
      </Suspense>
    </div>
  );
}

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

What is the best way to eliminate the gap between the dropdown-toggle button and dropdown-menu items?

Why does a space appear between the dropdown-toggle button and dropdown-menu? Is there a way to remove this space? The box-shadow currently conceals the gap, but it becomes visible once the box-shadow is eliminated. Here is the code snippet: <!DOCT ...

Arrange all absolute divs equidistant from each other

I'm struggling with positioning multiple absolute divs inside a relative container using the CSS 'left' property. I want these inner divs to be evenly spaced regardless of how many there are, without setting fixed values for each. Currently ...

When employing the map function to populate a table, ensure that 2 rows are returned

In my code, I have implemented a Semantic-UI-React Table in the following manner: <Table striped celled fixed textAlign="center"> <Table.Body>{activeLogList}</Table.Body> </Table> To populate this table with my Log List, I use ...

Encountering a frozen UI when navigating can be resolved by incorporating redux-persist with React

As I navigate through the app, I encounter a problem where the UI gets stuck even though the URL changes. I wanted to include redux-persist in my current app, but it led me to encounter an unfamiliar bug. Just a heads up: I am also using redux-saga as mi ...

Refreshing the cache in SWR, but the user interface remains unchanged inexplicably - SWR hook in Next.js with TypeScript

I am currently working on a project that resembles Facebook, and I am facing an issue with the like button functionality. Whenever I press the like button, I expect to see the change immediately, but unfortunately, SWR only updates after a delay of 4-8 sec ...

What is the best way to use jQuery to adjust the size of a slider image based on a percentage of the browser window

I've been searching all over for a solution to this issue, but so far I haven't had any luck. Basically, I have an image that is 1800 pixels wide by 500 pixels high. I need this image to adapt to all screen resolutions. Instead of having a fixed ...

Keep retrieving information until the outcome becomes an empty array

I'm currently implementing the Selly API in my project and I've encountered an issue with fetching all products as the Selly API paginates the results. To overcome this, my approach is to fetch all products, store them in an array, and then outp ...

Achieving a consistent border-radius effect during hover transitions

I designed a div that initially displays an image, but upon hovering over it, a second div with text and a solid colored background appears to mask the original content. To see what I'm talking about, check out my jsfiddle: 'Mask on Hover' ...

Having trouble displaying an array in React by using Array.map()?

My code used axios to retrieve an array of usernames and then utilized setState to update the state. I checked the users array in console.log to confirm that it was indeed an array. axios.get("http://localhost:5000/users/") .then((res) =& ...

Changing the element to "position: absolute" prevents it from stretching to the full width

After styling my login page to perfection with the container div set to display: block and position: static, I encountered an issue when attempting to switch to display: inline-block or position: absolute. The container div stopped adhering to its maximum ...

Avoiding repetition in json array using reactjs with the help of axios

After receiving guidance from @Akrion, I managed to resolve the issue! Check out my comments below our conversation for the solution. I am relatively new to reactJS and axios, but I recently collaborated with a classmate on a project. Now, I find myself s ...

Show the selected checkbox options upon clicking the submit button

Having trouble setting up a filter? I need to create a feature where checked values from checkboxes are displayed in a specific div after submitting. The display should include a 'Clear All' button and individual 'X' buttons to remove e ...

The alignment of CSS boxes at the top is off

My challenge is to stack 3 containers horizontally, but they have different heights and the smaller ones end up at the bottom. How can I resolve this issue? This is the code snippet I am currently using for the boxes: .brand{ border: 1px solid black; bor ...

Obtain the user's ID in string format from the clerk

I'm trying to retrieve the clerk ID to cross-reference with the backend. The issue is that the clerk is using a hook which isn't compatible with this function type. export const getServerSideProps = async ({ req }) => { const { isLoaded, is ...

Having issues with the functionality of the Material UI checkbox component

Having issues with getting the basic checked/unchecked function to work in my react component using material UI checkbox components. Despite checking everything, it's still not functioning as expected. Can someone please assist? Here's the code s ...

Delay the occurrence of a hover effect until the previous effect has finished executing

As I hover over an element, the desired animation is displayed while hiding other elements on the page. The challenge I'm encountering is that if I quickly hover over many divs, the animations queue up and hide the divs sequentially. I want only one ...

Meteor encountered an error while trying to insert the data: Access has been denied. There are no validation rules set on this specific collection to allow the method '

Hey there! I've recently started working on a Meteor-React project and I'm facing an issue while trying to add a new object to an existing collection. The error mentioned in the title keeps popping up. Below is the component responsible for inse ...

What is causing the unusual behavior of z-index in this specific scenario?

I have a good understanding of z-index and decided to practice with it by writing the following code: *{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; di ...

Tips on navigating to a URL with a component in React without losing the passed props

When the onClick event is triggered, I aim to redirect to a new component with props passed to it along with a new URL. My App.js import React from "react"; import Main from "./Components/Main/Main"; import "bootstrap/dist/css/boo ...

Every time I enter npm start in the terminal, I consistently encounter this error

After developing a simple web app and posting it on my repository, I started encountering these persistent errors. npm ERR! code ELIFECYCLE – David 1 hour ago npm ERR! syscall spawn C:\Windows\system32\cmd.exe;C:\Users'usernam ...