used suspense and lazy loading for better performance

git-oxygen · May 29, 2020 · 937f6dc · 937f6dc
1 parent 7c02351
commit 937f6dc
Showing 1 changed file with 27 additions and 23 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Suspense, lazy } from 'react';
 import Navbar from './components/Navbar';
 import './App.css';
-import Home from './components/Home/Home';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import Footer from './components/Footer';
-import Resource from './components/Category/Resource';
-import Resources from './components/Category/Resources';
 import ScrollToTopBtn from './components/ScrollToTopBtn';
+import Spinner from './components/Spinner';
+
+const Home = lazy(() => import('./components/Home/Home'));
+const Resource = lazy(() => import('./components/Category/Resource'));
+const Resources = lazy(() => import('./components/Category/Resources'));
 
 function App() {
   const [searchInput, setSearchInput] = useState('');
@@ -38,25 +40,27 @@ function App() {
       <Navbar darkMode={darkMode} setDarkMode={setDarkMode} />
       <ScrollToTopBtn />
       <div style={{ marginTop: '3rem' }}></div>
-      <Switch>
-        <Route exact path='/' component={Home} />
-        <Route
-          exact
-          path={['/resources', '/bookmarked']}
-          render={() => (
-            <Resources
-              handleInputChange={handleInputChange}
-              searchInput={searchInput}
-            />
-          )}
-        />
-        <Route
-          exact
-          path='/resources/:id'
-          render={(props) => <Resource {...props} />}
-        />
-        <Redirect to='/' />
-      </Switch>
+      <Suspense fallback={<Spinner />}>
+        <Switch>
+          <Route exact path='/' component={Home} />
+          <Route
+            exact
+            path={['/resources', '/bookmarked']}
+            render={() => (
+              <Resources
+                handleInputChange={handleInputChange}
+                searchInput={searchInput}
+              />
+            )}
+          />
+          <Route
+            exact
+            path='/resources/:id'
+            render={(props) => <Resource {...props} />}
+          />
+          <Redirect to='/' />
+        </Switch>
+      </Suspense>
       <Footer />
     </div>
   );