Improve initial load on explore route

app/components/PlacePopup.tsx

@@ -63,26 +63,6 @@ const PlacePopup = ({
     }
   }, [navigation, onClose]);
 
-  // useEffect(() => {
-  //   if (!map || !place.place_geometry || !place.place_geometry.geometry_json)
-  //     return;
-
-  //   switch (place.place_geometry.geometry_json.type) {
-  //     case "GeometryCollection":
-  //       setCoordinates(
-  //         place.place_geometry.geometry_json.geometries.find(
-  //           (geom) => geom.type === "Point"
-  //         )?.coordinates as [number, number]
-  //       );
-  //       break;
-  //     default:
-  //       setCoordinates(
-  //         place.place_geometry.geometry_json.coordinates as [number, number]
-  //       );
-  //       break;
-  //   }
-  // }, [map, place]);
-
   useEffect(() => {
     if (!map) return;
     if (location) setCoordinates([location.lon, location.lat]);

app/data/coredata.ts

@@ -5,13 +5,12 @@ import {
   keys,
   modelFieldUUIDs,
 } from "~/config";
-import type { TPlaceRecord, TPlace, TESHit } from "~/types";
+import type { TPlaceRecord, TPlace, TESHit, TPlaceGeoJSON } from "~/types";
 
 const elasticSearchHeaders = () => {
   const esHeaders = new Headers();
   esHeaders.append("authorization", `ApiKey ${keys.elasticsearch}`);
   esHeaders.append("Content-Type", "application/json");
-  esHeaders.append("ApiKey", keys.elasticsearch);
   return esHeaders;
 };
 
@@ -143,7 +142,6 @@ export const fetchPlacesByType = async (type: string) => {
         "location",
         "types",
         "identifier",
-        "geojson",
         "slug",
       ],
     },
@@ -162,3 +160,42 @@ export const fetchPlacesByType = async (type: string) => {
   const places: TPlace[] = data.hits.hits.map((hit: TESHit) => hit._source);
   return places;
 };
+
+export const fetchPlacesGeoJSON = async (type: string) => {
+  const body = {
+    query: {
+      bool: {
+        filter: [
+          {
+            term: {
+              types: "Barrier Island",
+            },
+          },
+        ],
+        must: {
+          match_all: {},
+        },
+      },
+    },
+    size: 250,
+    from: 0,
+    _source: {
+      includes: ["geojson"],
+    },
+  };
+
+  const response = await fetch(
+    `${dataHosts.elasticSearch}/${indexCollection}/_search`,
+    {
+      method: "POST",
+      body: JSON.stringify(body),
+      headers: elasticSearchHeaders(),
+    }
+  );
+
+  const data = await response.json();
+  const places: TPlaceGeoJSON[] = data.hits.hits.map(
+    (hit: TESHit) => hit._source
+  );
+  return places;
+};

app/routes/explore.tsx

@@ -2,7 +2,7 @@ import { useContext, useState, useEffect, useCallback, Suspense } from "react";
 import { MapContext } from "~/contexts";
 import { useLoaderData, defer, Link, useNavigation } from "@remix-run/react";
 import { ClientOnly } from "remix-utils/client-only";
-import { fetchPlacesByType } from "~/data/coredata";
+import { fetchPlacesByType, fetchPlacesGeoJSON } from "~/data/coredata";
 import { placesToFeatureCollection } from "~/utils/toFeatureCollection";
 import IntroModal from "~/components/layout/IntroModal";
 import Loading from "~/components/layout/Loading";
@@ -12,11 +12,11 @@ import { defaultBounds, topBarHeight } from "~/config";
 import type { MapMouseEvent, MapGeoJSONFeature } from "maplibre-gl";
 import type { TPlace } from "~/types";
 import type { LoaderFunction } from "@remix-run/node";
+import type { FeatureCollection } from "geojson";
 
 export const loader: LoaderFunction = async () => {
   const islands: TPlace[] = await fetchPlacesByType("Barrier Island");
-  const geojson = placesToFeatureCollection(islands);
-  return defer({ islands, geojson });
+  return defer({ islands });
 };
 
 export const HydrateFallback = () => {
@@ -26,17 +26,26 @@ export const HydrateFallback = () => {
 const Explore = () => {
   const { map, mapLoaded } = useContext(MapContext);
   const [isModalOpen, setIsModalOpen] = useState<boolean>(true); // Modal state
+  const [geojson, setGeojson] = useState<FeatureCollection>();
   const [activeIsland, setActiveIsland] = useState<TPlace | undefined>(
     undefined
   );
-  const { islands, geojson } = useLoaderData<typeof loader>();
+  const { islands } = useLoaderData<typeof loader>();
   const navigation = useNavigation();
 
   useEffect(() => {
     if (!map) return;
     if (navigation.state === "idle") map.fitBounds(defaultBounds());
   }, [map, navigation]);
 
+  useEffect(() => {
+    const fetchGeoJSON = async () => {
+      const islandGeoJSON = await fetchPlacesGeoJSON("Barrier Island");
+      setGeojson(placesToFeatureCollection(islandGeoJSON) as FeatureCollection);
+    };
+    fetchGeoJSON();
+  }, [islands]);
+
   const handleMouseEnter = useCallback(() => {
     if (map) map.getCanvas().style.cursor = "pointer";
   }, [map]);

app/types.ts

@@ -487,7 +487,7 @@ export type TTypeColors = {
 };
 
 export type TPlace = {
-  geojson: FeatureCollection;
+  geojson?: FeatureCollection;
   identifier: string;
   types: string[];
   name: string;
@@ -501,6 +501,10 @@ export type TPlace = {
   slug: string;
 };
 
+export type TPlaceGeoJSON = {
+  geojson: FeatureCollection;
+};
+
 export type TESHit = {
   _index: string;
   _type: string;

app/utils/toFeatureCollection.ts

@@ -2,7 +2,7 @@ import { feature, featureCollection } from "@turf/turf";
 import { PLACE_TYPES } from "~/config";
 import resolveConfig from "tailwindcss/resolveConfig";
 import tailwindConfig from "tailwind.config";
-import type { TPlace, TPlaceRecord, TRelatedPlaceRecord } from "~/types";
+import type { TPlaceGeoJSON, TPlaceRecord, TRelatedPlaceRecord } from "~/types";
 import type { Hit } from "instantsearch.js";
 import type { FeatureCollection } from "geojson";
 
@@ -62,7 +62,7 @@ export const hitsToFeatureCollection = (hits: Hit[]) => {
   return featureCollection;
 };
 
-export const placesToFeatureCollection = (places: TPlace[]) => {
+export const placesToFeatureCollection = (places: TPlaceGeoJSON[]) => {
   return {
     type: "FeatureCollection",
     features: places.map((place) => place.geojson.features).flat(),