1

In my project I' m using react-router and Suspence for rendering multiple lazy pages. The only problem id that the LoadingSpinner, that is the fallback prop of the Suspence component, loads for only 0.2ms when you go from one page to another. This duration is so short that it is not even visible to the naked eye

The App.js code:

import React, { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

import { AppContainer, RedirectComponent } from './app.styles';

import SearchField from '../components/search-field/search-field.component';
import ErrorBoundary from '../components/error-boundary/error-boundary.component';
import LoadingSpinner from '../components/loading-spinner/loading-spinner.component';
import RefreshRoute from '../components/refresh-route/refresh-route.component';

const PageNotFound = lazy(() => import('../pages/page-not-found/page-not-found.component'));
const MainPage = lazy(() => import('../pages/main-page/main-page.component'));
const CurrentForecast = lazy(() => import('../components/current-forecast/current-forecast.component'));

const App = () => ( 
  <AppContainer>
    <RedirectComponent to='/'>GO TO HOME PAGE</RedirectComponent>
    <SearchField />
    <ErrorBoundary>
      <RefreshRoute>
        <Suspense fallback={<LoadingSpinner />}>
          <Routes>        
              <Route exact path='/' element={<MainPage />} />
              <Route exact path='/details/:detailsID' element={<CurrentForecast isMainPage={false} />} />            
              <Route exact path='*' element={<PageNotFound />} />            
          </Routes>        
        </Suspense>
      </RefreshRoute>
    </ErrorBoundary>
  </AppContainer>
);

export default App;

How can I make sure that it has a minimum duration?

Saverio Randazzo
  • 217
  • 1
  • 7
  • 19
  • 1
    does it really dont work, or is the loading of the pages just that fast, that you will not see it? testing locally it will take one a few milliseconds for loading the js file including the page. – TheWuif Dec 04 '21 at 13:45
  • could you please state the version of react router and react-router-dom? – Tanishq Vyas Dec 04 '21 at 13:57
  • try Switch instead of Routes and try import { Switch, Route } from "react-router-dom" – Shahnad S Dec 04 '21 at 14:11
  • @TheWuif it's like you said! How can I make sure that it has a minimum duration? for example 2 secs – Saverio Randazzo Dec 04 '21 at 14:29
  • 1
    why do you want this? it is good that it loads that fast. why do you want your users to wait if they haven't to wait? – TheWuif Dec 04 '21 at 15:24

0 Answers0