Update lazy load of pages, improve UX

1. Update app.config.js — pages components are inported here
2. Add suspense component into every route of App
3. Add CenteredSpinner component for fallback, also for chat while it fetching
4. Remove pages/index.js

frontend/src/App.jsx

@@ -1,46 +1,55 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { ToastContainer } from 'react-toastify';
 import {
   BrowserRouter as Router, Routes, Route, Navigate,
 } from 'react-router-dom';
 import 'react-toastify/dist/ReactToastify.css';
 
+import CenteredSpinner from './components/CenteredSpinner';
+import config from './app.config';
 import { hooks } from './providers';
-import config from './app-config';
-import pages from './pages';
 
 const PrivateRoute = ({ children, redirectTo }) => {
   const auth = hooks.useAuth();
 
   return auth.loggedIn ? children : <Navigate to={redirectTo} />;
 };
+const WrappedRouteComponent = ({ children, isPrivate, redirectTo }) => (
+  <Suspense fallback={<CenteredSpinner />}>
+    {isPrivate ? (
+      <PrivateRoute redirectTo={redirectTo}>
+        {children}
+      </PrivateRoute>
+    ) : children}
+  </Suspense>
+);
+
+const { pages } = config;
 
 const App = () => (
   <div className="h-100" id="chat">
     <div className="d-flex flex-column h-100">
       <Router>
         <Routes>
           {Object
-            .values(config.pages)
+            .values(pages)
             .map(({
               id,
               route,
               isPrivate,
-              component,
-            }) => {
-              const Component = pages[component]();
-              return (
-                <Route
-                  key={id}
-                  path={route}
-                  element={isPrivate ? (
-                    <PrivateRoute redirectTo="/login">
-                      <Component />
-                    </PrivateRoute>
-                  ) : <Component />}
-                />
-              );
-            })}
+              Component,
+              redirectTo,
+            }) => (
+              <Route
+                key={id}
+                path={route}
+                element={(
+                  <WrappedRouteComponent isPrivate={isPrivate} redirectTo={redirectTo}>
+                    <Component />
+                  </WrappedRouteComponent>
+                )}
+              />
+            ))}
         </Routes>
       </Router>
       <ToastContainer />

frontend/src/app-config.js → frontend/src/app.config.js

@@ -1,26 +1,29 @@
+import { lazy } from 'react';
+
 const pages = {
   notFoundPage: {
     id: 0,
     route: '*',
-    component: 'notFoundPage',
+    Component: lazy(() => import('./pages/NotFoundPage')),
     isPrivate: false,
   },
   mainPage: {
     id: 1,
     route: '/',
-    component: 'mainPage',
+    redirectTo: '/login',
+    Component: lazy(() => import('./pages/MainPage')),
     isPrivate: true,
   },
   loginPage: {
     id: 2,
     route: '/login',
-    component: 'loginPage',
+    Component: lazy(() => import('./pages/LoginPage')),
     isPrivate: false,
   },
   signupPage: {
     id: 3,
     route: '/signup',
-    component: 'signupPage',
+    Component: lazy(() => import('./pages/SignupPage')),
     isPrivate: false,
   },
 };

frontend/src/components/CenteredSpinner.jsx

@@ -0,0 +1,15 @@
+import { Spinner } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+const CenteredSpinner = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="d-flex justify-content-center align-items-center h-100">
+      <Spinner animation="border" variant="primary">
+        <span className="visually-hidden">{t('processes.loading')}</span>
+      </Spinner>
+    </div>
+  );
+};
+
+export default CenteredSpinner;

frontend/src/pages/MainPage.jsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Spinner } from 'react-bootstrap';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
-import { Navbar, Chat } from '../components';
-import { hooks } from '../providers';
+import getAuthHeader from '../utils/getAuthHeader';
+import CenteredSpinner from '../components/CenteredSpinner';
+import { Chat, Navbar } from '../components';
 import { fetchChatData } from '../api/serverApi';
+import { hooks } from '../providers';
 import { serverRoutes } from '../utils/routes';
-import getAuthHeader from '../utils/getAuthHeader';
 import { addChannels, setDefaultChannel, setActive } from '../slices/channelsSlice';
 import { addMessages } from '../slices/messagesSlice';
 import toasts from '../utils/toasts';
@@ -51,11 +51,7 @@ const MainPage = () => {
     connectToChat();
   }, [auth, dispatch, navigate, socket, t]);
   return (fetchStatus !== 'idle') ? (
-    <div className="d-flex justify-content-center align-items-center h-100">
-      <Spinner animation="border" variant="primary">
-        <span className="visually-hidden">{t('processes.loading')}</span>
-      </Spinner>
-    </div>
+    <CenteredSpinner />
   ) : (
     <>
       <Navbar />