Fix 1: Lazy load page sections

Using `Suspense` and `React.lazy()`, we isolated entire sections of the page and lazy load them.

Note that Suspense is wrapped around each of the lazy components. That ensures separate async threads.

Suspense is not wrapping the entire app because that would cause Menu and Hero to wait for the other components to load before rendering.

Instead, we focus on rendering Hero and Menu first.

Author: grgur

src/App.js

@@ -1,25 +1,34 @@
 // @ts-nocheck
-import React from 'react';
-import Menu from './components/Menu';
+import React, { Suspense, lazy } from 'react';
 import Hero from './components/Hero';
-import Sidebar from './components/Sidebar';
-import Products from './components/Products';
-import BoringContent from './components/BoringContent';
-import Footer from './components/Footer';
+import Menu from './components/Menu';
 import './App.css';
 
+const Sidebar = lazy(() => import('./components/Sidebar'));
+const Products = lazy(() => import('./components/Products'));
+const BoringContent = lazy(() => import('./components/BoringContent'));
+const Footer = lazy(() => import('./components/Footer'));
+
 const App = () => (
   <>
     <Menu />
-    <Sidebar />
+    <Suspense fallback={<div />}>
+      <Sidebar />
+    </Suspense>
     <div id="main">
       <Hero />
       <main>
-        <Products />
-        <BoringContent />
+        <Suspense fallback={<div />}>
+          <Products />
+        </Suspense>
+        <Suspense fallback={<div />}>
+          <BoringContent />
+        </Suspense>
       </main>
     </div>
-    <Footer />
+    <Suspense fallback={<div />}>
+      <Footer />
+    </Suspense>
   </>
 );