perf: code-split maplibre-gl in AboutPage

client/src/pages/about/ui/AboutPage.tsx

@@ -3,24 +3,10 @@ import Link from '@mui/material/Link'
 import Paper from '@mui/material/Paper'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
-import * as maplibregl from 'maplibre-gl'
-import Map, { Marker } from 'react-map-gl/maplibre'
 import { STORE_EMAIL, STORE_PHONE, VK_URL } from '@/shared/config'
 import { PICKUP_ADDRESS_FULL, PICKUP_COORDINATES } from '@/shared/constants/pickup-point'
 import { usePageTitle } from '@/shared/lib/use-page-title'
-
-const rasterStyle = {
-  version: 8 as const,
-  sources: {
-    osm: {
-      type: 'raster' as const,
-      tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
-      tileSize: 256,
-      attribution: '© OpenStreetMap contributors',
-    },
-  },
-  layers: [{ id: 'osm', type: 'raster' as const, source: 'osm' }],
-}
+import { AboutMap } from './AboutMap'
 
 export function AboutPage() {
   usePageTitle('О нас')
@@ -63,43 +49,7 @@ export function AboutPage() {
           </Typography>
         </Paper>
 
-        <Box
-          sx={{
-            height: 380,
-            borderRadius: 2,
-            overflow: 'hidden',
-            border: 1,
-            borderColor: 'divider',
-            position: 'relative',
-          }}
-        >
-          <Map
-            mapLib={maplibregl}
-            initialViewState={{ latitude: lat, longitude: lng, zoom: 15 }}
-            style={{ width: '100%', height: 380 }}
-            mapStyle={rasterStyle}
-            scrollZoom={false}
-            dragRotate={false}
-            dragPan={false}
-            doubleClickZoom={false}
-            keyboard={false}
-            touchZoomRotate={false}
-          >
-            <Marker longitude={lng} latitude={lat} anchor="bottom">
-              <Box
-                sx={{
-                  width: 20,
-                  height: 20,
-                  bgcolor: 'primary.main',
-                  borderRadius: '50%',
-                  border: 2,
-                  borderColor: 'background.paper',
-                  boxShadow: 3,
-                }}
-              />
-            </Marker>
-          </Map>
-        </Box>
+        <AboutMap lat={lat} lng={lng} />
       </Stack>
     </Box>
   )