refactor: extract LooMapLoader

src/components/LooMap/LooMapLoader.tsx

@@ -0,0 +1,10 @@
+import dynamic from 'next/dynamic';
+
+const MapLoader = () => <p>Loading map...</p>;
+
+const LooMap = dynamic(() => import('./LooMap'), {
+  loading: MapLoader,
+  ssr: false,
+});
+
+export default LooMap;

src/pages/index.tsx

@@ -7,14 +7,10 @@ import VisuallyHidden from '../components/VisuallyHidden';
 import { useMapState } from '../components/MapState';
 import config from '../config';
 import { withApollo } from '../components/withApollo';
+import LooMap from '../components/LooMap/LooMapLoader';
 import useFilters from '../hooks/useFilters';
 
 const SIDEBAR_BOTTOM_MARGIN = 32;
-const MapLoader = () => <p>Loading map...</p>;
-const LooMap = dynamic(() => import('../components/LooMap'), {
-  loading: MapLoader,
-  ssr: false,
-});
 
 const HomePage = () => {
   const [mapState, setMapState] = useMapState();

src/pages/loos/[id]/edit.tsx

@@ -9,11 +9,11 @@ import Spacer from '../../../components/Spacer';
 import EntryForm from '../../../components/EntryForm';
 import Box from '../../../components/Box';
 import Login from '../../../components/Login';
+import PageLoading from '../../../components/PageLoading';
+import LooMap from '../../../components/LooMap/LooMapLoader';
 
 import config from '../../../config';
 import { useMapState } from '../../../components/MapState';
-
-import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { withApollo } from '../../../components/withApollo';
 import { ssrFindLooById, PageFindLooByIdComp } from '../../../api-client/page';
@@ -24,15 +24,6 @@ import {
   useUpdateLooMutation,
 } from '../../../api-client/graphql';
 
-import PageLoading from '../../../components/PageLoading';
-
-const MapLoader = () => <p>Loading map...</p>;
-
-const LooMap = dynamic(() => import('../../../components/LooMap'), {
-  loading: MapLoader,
-  ssr: false,
-});
-
 const EditPage: PageFindLooByIdComp = (props) => {
   const loo = props.data.loo;
   const router = useRouter();

src/pages/loos/[id]/index.tsx

@@ -15,13 +15,9 @@ import { useRouter } from 'next/router';
 import { dbConnect } from '../../../api/db';
 import ToiletDetailsPanel from '../../../components/ToiletDetailsPanel';
 import Notification from '../../../components/Notification';
+import LooMap from '../../../components/LooMap/LooMapLoader';
 
 const SIDEBAR_BOTTOM_MARGIN = 32;
-const MapLoader = () => <p>Loading map...</p>;
-const LooMap = dynamic(() => import('../../../components/LooMap'), {
-  loading: MapLoader,
-  ssr: false,
-});
 
 const LooPage: PageFindLooByIdComp = (props) => {
   const [mapState, setMapState] = useMapState();