Add prefetch to home page

Vizzuality · Nov 4, 2024 · 00099f1 · 00099f1
1 parent f62a005
commit 00099f1
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 75 deletions.
diff --git a/client/src/constants/basemaps.ts b/client/src/constants/basemaps.ts
diff --git a/client/src/constants/map.ts b/client/src/constants/map.ts
@@ -1,7 +1,7 @@
 import env from '@/env.mjs';
 
 export const MAPBOX_STYLES = {
-  default: `mapbox://styles/${env.NEXT_PUBLIC_MAPBOX_USERNAME}/${env.NEXT_PUBLIC_MAPBOX_STYLE_ID}?fresh=true`,
+  default: `mapbox://styles/${env.NEXT_PUBLIC_MAPBOX_USERNAME}/${env.NEXT_PUBLIC_MAPBOX_STYLE_ID}`,
 };
 
 export const DEFAULT_MAP_STATE = {

diff --git a/client/src/containers/home/index.tsx b/client/src/containers/home/index.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState, useMemo, useCallback } from 'react';
 import { useMap } from 'react-map-gl';
 
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 import { motion } from 'framer-motion';
 import { useAtomValue, useSetAtom } from 'jotai';
@@ -13,7 +14,7 @@ import { homeMarkerAtom } from '@/store/home';
 
 import { useIsMobile } from '@/hooks/screen-size';
 
-import { DEFAULT_MOBILE_ZOOM } from '@/components/map/constants';
+import { DEFAULT_MOBILE_ZOOM, DEFAULT_VIEW_STATE } from '@/components/map/constants';
 import { Dialog, DialogContentHome } from '@/components/ui/dialog';
 import ScrollExplanation from '@/components/ui/scroll-explanation';
 
@@ -46,7 +47,7 @@ const Home = () => {
     map?.easeTo({
       bearing: 0,
       pitch: 0,
-      zoom: isMobile ? DEFAULT_MOBILE_ZOOM : 2,
+      zoom: isMobile ? DEFAULT_MOBILE_ZOOM : DEFAULT_VIEW_STATE.zoom,
       center: { lng: nextLng, lat },
       duration: 500,
       padding: {
@@ -59,10 +60,15 @@ const Home = () => {
     });
   }, [isMobile, map, size.width]);
 
+  const router = useRouter();
+  useEffect(() => {
+    router.prefetch('/globe');
+  }, []);
+
   useEffect(() => {
     if (map) {
       spin();
-      map.resize();
+      map?.resize();
       map.on('moveend', spin);
       return () => {
         map.stop();
@@ -143,7 +149,6 @@ const Home = () => {
                   onClick={() => map?.stop()}
                   className="font-bold uppercase tracking-wide"
                   href="/globe"
-                  prefetch
                 >
                   <div className="flex h-full w-full items-center justify-center rounded-full bg-teal-500">
                     Explore

diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
@@ -25,7 +25,7 @@ import GlobeMarkers from '@/containers/map/markers/globe-markers';
 import StoryMarkers from '@/containers/map/markers/story-markers';
 
 import Map from '@/components/map';
-import { DEFAULT_PROPS } from '@/components/map/constants';
+import { DEFAULT_MOBILE_ZOOM, DEFAULT_PROPS } from '@/components/map/constants';
 import { CustomMapProps } from '@/components/map/types';
 
 import SelectedStoriesMarker from './markers/selected-stories-marker';
@@ -104,25 +104,25 @@ export default function MapContainer() {
     },
     [isGlobePage]
   );
+  const isMobile = useIsMobile();
 
   useEffect(() => {
     if (map && tmpBbox?.options) {
       const { bearing, pitch, zoom, latitude, longitude } = tmpBbox.options;
       map.flyTo({
         bearing,
         pitch,
-        zoom,
+        zoom: isMobile ? DEFAULT_MOBILE_ZOOM : zoom,
         center: [longitude, latitude],
         duration: 1000,
         animate: true,
         padding: initialViewState?.padding,
       });
     }
-  }, [map, initialViewState, tmpBbox]);
+  }, [map, initialViewState, tmpBbox, isMobile]);
 
   const targetRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  const isMobile = useIsMobile();
 
   const { scrollYProgress } = useScroll({
     target: targetRef,