From f199bd70d01f139f867c0aa4a353b4dedb074111 Mon Sep 17 00:00:00 2001
From: Amrit Acharya <47746651+Amritach222@users.noreply.github.com>
Date: Tue, 3 Oct 2023 13:17:02 +0545
Subject: [PATCH] Update App.js

Added lazy loading component and  Wrap component with React suspense
---
 to-do/src/App.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/to-do/src/App.js b/to-do/src/App.js
index 5f3bdd7..f1ef814 100644
--- a/to-do/src/App.js
+++ b/to-do/src/App.js
@@ -1,11 +1,12 @@
-import React, { useReducer } from 'react'
+import React, { useReducer, Suspense } from 'react'
 import { Container } from 'reactstrap';
 import "bootstrap/dist/css/bootstrap.min.css";
 import './App.css';
 import { TodoContext } from './context/TodoContext';
 import todoReducer from './context/reducer';
-import TodoForm from './components/TodoForm'
-import Todos from './components/Todos';
+// importing these components with react lazy for improving initial loading time 
+const TodoForm= React.lazy(()=>import("./components/TodoForm"))
+const Todos= React.lazy(()=>import("./components/Todos"))
 
 const App = () => {
   const [todos, dispatch] = useReducer(todoReducer, [])
@@ -15,8 +16,10 @@ const App = () => {
     <TodoContext.Provider value={{ todos, dispatch }}>
       <Container fluid>
         <h1>Todo Application</h1>
+        <Suspense fallback={<div>loading...</div>}>
         <Todos />
         <TodoForm />
+      </Suspense>
       </Container>
     </TodoContext.Provider>
   );