Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Load Loader component before any other Components in react while using suspense

I need to load the fallback element before anything else been loaded

<Suspense fallback={<Loader />}>

this should work before the remaining Wrapper components

import Loader from './components/loader/loader';
import React, { Suspense, lazy } from 'react'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Routes, Route } from "react-router-dom";
import reduxStore from './redux/reduxStore';
const UserWrapper = lazy(() => import('./wrapper/UserWrapper'));
const AdminWrapper = lazy(() => import('./wrapper/AdminWrapper'));
const VendorWrapper = lazy(() => import('./wrapper/VendorWrapper'));



function App() {
  return (

  <React.StrictMode>
    <Router>
        <Suspense fallback={<Loader />}>
          <Routes>
            <Route path="*" element={<UserWrapper />} />
            <Route path='/admin/*' element={<AdminWrapper />} />
            <Route path='/vendor/*' element={<VendorWrapper />} />
          </Routes>
        </Suspense>
    </Router>
  </React.StrictMode>
  )
}

export default App

When i was trying check for the performance of my code (while a user using 3g) in network(inside inspection)
I started this issue, that component is been loaded only after a while
or like after loading BrowserRouter

Tags:

2

Answers


  1. 0

    To display the loader immediately and handle slow network conditions effectively with React and , follow this refactored approach:

    Optimize your bundle: Ensure your JavaScript bundle is as small as possible to reduce loading times.

    Inline Loader CSS/JS: Include critical styles or scripts for the Loader directly in the HTML to allow it to show instantly.

    Preload your bundle: Use for your main JavaScript bundle in the HTML head to speed up loading.

    Use a static HTML loader: Add a simple loader directly in your HTML and hide it when React is ready.

    Here’s a simplified example incorporating these strategies:

    HTML (index.html):

    <head>
  <link rel="preload" href="path/to/your/main-bundle.js" as="script">
  <style>
    /* Inline CSS for the static loader */
    #static-loader { /* Loader styles */ }
  </style>
</head>
<body>
  <div id="static-loader">Loading...</div>
  <div id="root"></div>
  <script>
    // Inline script to hide the static loader when React is ready
    document.addEventListener('DOMContentLoaded', () => {
      const loader = document.getElementById('static-loader');
      if (loader) loader.style.display = 'none';
    });
  </script>
</body>

    React Component (App.js):

    import React, { Suspense, lazy, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

// Lazy-loaded components
const UserWrapper = lazy(() => import('./wrapper/UserWrapper'));
const AdminWrapper = lazy(() => import('./wrapper/AdminWrapper'));
const VendorWrapper = lazy(() => import('./wrapper/VendorWrapper'));

function App() {
  useEffect(() => {
    // Hide the static loader once React is ready
    const loader = document.getElementById('static-loader');
    if (loader) loader.style.display = 'none';
  }, []);

  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="*" element={<UserWrapper />} />
          <Route path='/admin/*' element={<AdminWrapper />} />
          <Route path='/vendor/*' element={<VendorWrapper />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

    This refactored code ensures that a loader is visible immediately upon page load, improving the user experience on slow networks.

    Login or Signup to reply.
  2. 0

    To show the loading spinner as fallback element before any other content is loaded, you should position the Suspense component higher up in your components hierarchy. Specifically, in your case, you’ll want to ensure that the Suspense component containing the loading spinner as a fallback is rendered before the BrowserRouter component.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search