SEO: Add `Suspense` to page components in routes

[sonylomo]

Description

We're improving the SEO performance of the website. Having a fallback Loader component for every page before it loads helps bump up SEO.

You could do some further reading here:

• How to Make React Apps SEO-Friendly – A Handbook for Beginners
• React SEO: A Guide to Building SEO-Friendly React Web Apps

Tasks

• [ ] Wrap all route component pages with React Suspense with a Loader fallback component of your choice i.e

// src/router/index.jsx
import {Suspense} from 'react';

const router = createBrowserRouter([
  {
    path: "/",
    element: 
     <Suspense fallback={<div>Loading...</div>}>
        <Layout />
     </Suspense>,
    children: [
      {
        path: "/",
        element: 
         <Suspense fallback={<div>Loading...</div>}>
            <LandingPage />
         </Suspense>,,
      },
      {
        path: "/products",
        element: 
         <Suspense fallback={<div>Loading...</div>}>
            <Products />
         </Suspense>,
      },
... rest of code

• [ ] Optional: you could also add lazy loading to Home Page components and compare it's performance without lazy loading. You'd have to use React.lazy for imports, e.g:

  const LandingPage = React.lazy(() => import('./LandingPage'));

[sonylomo]

Feel free to reach out if you have any inquiries or need more guidance.