[Closes #11] Use lazy import of LeafletContainer with suspense (#13)

* lazy import

* added suspense wrapper

Author: rnavarro97

client/src/Home.jsx

@@ -1,8 +1,10 @@
 import { Container, Title } from '@mantine/core';
 import { Head } from '@unhead/react';
-import LeafletContainer from './Components/LeafletContainer';
+import { lazy, Suspense } from 'react';
 import 'leaflet/dist/leaflet.css';
 
+const LeafletContainer = lazy(() => import('./Components/LeafletContainer'));
+
 function Home () {
   return (
     <>
@@ -12,7 +14,9 @@ function Home () {
       <Container fluid p={0}>
         <Title order={1} px='md' pt='md'>Pocket Gardens</Title>
         <div style={{ height: 'calc(100dvh - 60px)', minHeight: 400, width: '100%', overflow: 'hidden', position: 'relative', zIndex: 0 }}>
-          <LeafletContainer />
+          <Suspense fallback={<div>Loading map...</div>}>
+            <LeafletContainer />
+          </Suspense>
         </div>
       </Container>
     </>