refactor(frontend): concurrent rendering in React 18

- use the new `createRoot` API in React 18.
- move the base map layer outside of the map's Suspense boundary, to avoid an error in React Map GL when the map first mounts.

frontend/src/index.tsx

@@ -1,5 +1,6 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { App } from './App';
 
 const container = document.getElementById('root');
-render(<App />, container);
+const root = createRoot(container);
+root.render(<App />);

frontend/src/map/MapView.tsx

@@ -114,12 +114,11 @@ const MapHudMobileLayout = () => {
 };
 
 const MapViewContent = () => {
-  const [viewState, setViewState] = useRecoilState(mapViewStateState);
   const background = useRecoilValue(backgroundState);
   const showLabels = useRecoilValue(showLabelsState);
   const viewLayers = useRecoilValue(viewLayersFlatState);
   const saveViewLayers = useSaveViewLayers();
-  const { mapStyle, firstLabelId } = useBasemapStyle(background, showLabels);
+  const { firstLabelId } = useBasemapStyle(background, showLabels);
 
   useEffect(() => {
     saveViewLayers(viewLayers);
@@ -140,7 +139,7 @@ const MapViewContent = () => {
   const isMobile = useIsMobile();
 
   return (
-    <BaseMap mapStyle={mapStyle} viewState={viewState} onViewState={setViewState}>
+    <>
       <DataMap
         beforeId={firstLabelId}
         viewLayers={viewLayers}
@@ -152,14 +151,22 @@ const MapViewContent = () => {
         <TooltipContent />
       </DataMapTooltip>
       {isMobile ? <MapHudMobileLayout /> : <MapHudDesktopLayout />}
-    </BaseMap>
+    </>
   );
 };
 
-export const MapView = () => (
+export const MapView = () => {
+  const background = useRecoilValue(backgroundState);
+  const showLabels = useRecoilValue(showLabelsState);
+  const [viewState, setViewState] = useRecoilState(mapViewStateState);
+  const { mapStyle } = useBasemapStyle(background, showLabels);
+  return (
   <ErrorBoundary message="There was a problem displaying the map." justifyErrorContent="center">
-    <Suspense fallback={null}>
-      <MapViewContent />
-    </Suspense>
+    <BaseMap mapStyle={mapStyle} viewState={viewState} onViewState={setViewState}>
+      <Suspense fallback={null}>
+        <MapViewContent />
+      </Suspense>
+    </BaseMap>
   </ErrorBoundary>
-);
+  )
+};