WIP: dynamically import MapGL

Author: tuukka

src/App.tsx

@@ -1,11 +1,10 @@
-import React, { useState, useEffect, useRef, ReactText } from "react";
+import React, { useState, useEffect, useRef, ReactText, Suspense } from "react";
 import { useRouteMatch, useHistory } from "react-router-dom";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { match } from "react-router-dom";
 import { Button, IconButton } from "@material-ui/core";
 import { Close as CloseIcon } from "@material-ui/icons";
 import { useSnackbar } from "notistack";
-import MapGL, { Popup, Source, Layer, Marker } from "@urbica/react-map-gl";
 import { WebMercatorViewport } from "viewport-mercator-project";
 import type { WebMercatorViewportOptions } from "viewport-mercator-project";
 import { distance as turfDistance } from "@turf/turf";
@@ -136,6 +135,12 @@ const fitBounds = (
 };
 
 const App: React.FC = () => {
+  const MapGL = React.lazy(() => import("@urbica/react-map-gl"));
+  const Popup = React.lazy(async () => {return (await import("@urbica/react-map-gl")).Popup});
+  const Source = React.lazy(async () => {return (await import("@urbica/react-map-gl")).Source});
+  const Layer = React.lazy(async () => {return (await import("@urbica/react-map-gl")).Layer});
+  const Marker = React.lazy(async () => {return (await import("@urbica/react-map-gl")).Marker});
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const map = useRef<any>(null);
 
@@ -489,7 +494,8 @@ const App: React.FC = () => {
           );
         }}
       />
-      <MapGL
+      <Suspense fallback={<div>loading</div>}>
+        <MapGL
         ref={map}
         // This is according to the Get Started materials:
         // https://uber.github.io/react-map-gl/docs/get-started/get-started/
@@ -707,6 +713,7 @@ const App: React.FC = () => {
           </Popup>
         )}
       </MapGL>
+      </Suspense>
     </div>
   );
 };