From 36f5080b15244182f2801122c50a8a835fb45af3 Mon Sep 17 00:00:00 2001
From: amaralc <amaral.calil@gmail.com>
Date: Thu, 29 Aug 2024 06:50:18 -0300
Subject: [PATCH] fix: add suspense

---
 src/App.jsx | 54 +++++++++++++++++++++++++++--------------------------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 0cd082a..ec8816c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import reactLogo from "./assets/react.svg";
 import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
 import "./App.css";
@@ -6,33 +6,35 @@ const Foo = React.lazy(() => import("./Foo"));
 
 function App() {
   return (
-    <BrowserRouter>
-      <div className="App">
-        <div>
-          <a href="https://vitejs.dev" target="_blank">
-            <img src="/vite.svg" className="logo" alt="Vite logo" />
-          </a>
-          <a href="https://reactjs.org" target="_blank">
-            <img src={reactLogo} className="logo react" alt="React logo" />
-          </a>
-        </div>
-        <h1>Vite + React</h1>
-        <div className="card">
-          <Link to="/foo">
-            <button>Go to Foo</button>
-          </Link>
-          <p>
-            Edit <code>src/App.jsx</code> and save to test HMR
+    <Suspense fallback={<div>Loading...</div>}>
+      <BrowserRouter>
+        <div className="App">
+          <div>
+            <a href="https://vitejs.dev" target="_blank">
+              <img src="/vite.svg" className="logo" alt="Vite logo" />
+            </a>
+            <a href="https://reactjs.org" target="_blank">
+              <img src={reactLogo} className="logo react" alt="React logo" />
+            </a>
+          </div>
+          <h1>Vite + React</h1>
+          <div className="card">
+            <Link to="/foo">
+              <button>Go to Foo</button>
+            </Link>
+            <p>
+              Edit <code>src/App.jsx</code> and save to test HMR
+            </p>
+          </div>
+          <p className="read-the-docs">
+            Click on the Vite and React logos to learn more
           </p>
+          <Routes>
+            <Route path="/foo" element={<Foo />} />
+          </Routes>
         </div>
-        <p className="read-the-docs">
-          Click on the Vite and React logos to learn more
-        </p>
-        <Routes>
-          <Route path="/foo" element={<Foo />} />
-        </Routes>
-      </div>
-    </BrowserRouter>
+      </BrowserRouter>
+    </Suspense>
   );
 }