Updated map loading spinner

packages/map-interface/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.0] - 2024-11-16
+
+- Improve map state management with `zustand` (in `@macrostrat/mapbox-react`)
+- Add `styleType` prop to `DevMapPage` component to allow setting "standard"
+  Mapbox styles or "macrostrat" styles (the default)
+
 ## [1.0.12] - 2024-11-13
 
 - Add a `bounds` option to the `DevMapPage` component

packages/map-interface/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "1.0.12",
+  "version": "1.1.0",
   "description": "Map interface for Macrostrat",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -10,7 +10,7 @@
   "dependencies": {
     "@macrostrat/color-utils": "^1.0.0",
     "@macrostrat/hyper": "^3.0.0",
-    "@macrostrat/mapbox-react": "^2.2.3",
+    "@macrostrat/mapbox-react": "^2.4.0",
     "@macrostrat/mapbox-utils": "^1.3.2",
     "@macrostrat/ui-components": "^4.0.4",
     "@mapbox/tilebelt": "^2.0.0",

packages/map-interface/src/context-panel/index.ts

@@ -29,9 +29,8 @@ export function LoadingButton({
 }
 
 export function MapLoadingButton(props) {
-  const { isLoading } = useMapStatus();
-  const mapIsLoading = useMemo(() => isLoading, [isLoading]);
-  return h(LoadingButton, { ...props, isLoading: mapIsLoading });
+  const isLoading = useMapStatus((s) => s.isLoading);
+  return h(LoadingButton, { ...props, isLoading });
 }
 
 type AnyChildren = React.ReactNode;

packages/map-interface/src/helpers.ts

@@ -3,6 +3,7 @@ import {
   useMapEaseTo,
   useMapDispatch,
   useMapStatus,
+  useMapInitialized,
 } from "@macrostrat/mapbox-react";
 import { useMemo, useRef } from "react";
 import { debounce } from "underscore";
@@ -86,7 +87,7 @@ export function MapPaddingManager({
 export function MapMovedReporter({ onMapMoved = null }) {
   const mapRef = useMapRef();
   const dispatch = useMapDispatch();
-  const { isInitialized } = useMapStatus();
+  const isInitialized = useMapInitialized();
 
   const mapMovedCallback = useCallback(() => {
     const map = mapRef.current;
@@ -121,7 +122,7 @@ export function MapLoadingReporter({
   const mapRef = useMapRef();
   const loadingRef = useRef(false);
   const dispatch = useMapDispatch();
-  const { isInitialized } = useMapStatus();
+  const isInitialized = useMapInitialized();
 
   useEffect(() => {
     const map = mapRef.current;
@@ -157,7 +158,7 @@ export function MapLoadingReporter({
 export function MapMarker({ position, setPosition, centerMarker = true }) {
   const mapRef = useMapRef();
   const markerRef = useRef(null);
-  const { isInitialized } = useMapStatus();
+  const isInitialized = useMapInitialized();
 
   useMapMarker(mapRef, markerRef, position);
 

packages/mapbox-react/src/context.ts

@@ -78,6 +78,10 @@ export function useMapStatus(
   return useMapStore(useSubSelector("status", selector));
 }
 
+export function useMapInitialized() {
+  return useMapStore((state) => state.status.isInitialized);
+}
+
 function useSubSelector(
   key: string,
   selector: (state: any) => any | null

packages/mapbox-react/src/focus-state.ts

@@ -1,6 +1,6 @@
 /* Reporters and buttons for evaluating a feature's focus on the map. */
 import { Intent, Button } from "@blueprintjs/core";
-import { useMapRef, useMapStatus } from "./context";
+import { useMapInitialized, useMapRef, useMapStatus } from "./context";
 import classNames from "classnames";
 import { useState, useRef, useEffect } from "react";
 import bbox from "@turf/bbox";
@@ -160,7 +160,7 @@ export function useMapEaseTo(props: MapEaseToProps) {
    * controlled outside of the component. */
   const updateQueue = useRef<MapEaseToState[]>([]);
   // This forces a re-render after initialization, I guess
-  const { isInitialized } = useMapStatus();
+  const isInitialized = useMapInitialized();
 
   /** Handle changes to any map props */
   useEffect(() => {
@@ -345,7 +345,7 @@ export function useFocusState(
 ) {
   const map = useMapRef();
   const [focusState, setFocusState] = useState<PositionFocusState | null>(null);
-  const { isInitialized } = useMapStatus();
+  const isInitialized = useMapInitialized();
 
   useEffect(() => {
     if (map.current == null || position == null) return;

packages/mapbox-react/src/hooks.ts

@@ -3,15 +3,14 @@ import mapboxgl from "mapbox-gl";
 import { toggleMapLabelVisibility } from "@macrostrat/mapbox-utils";
 import { useMapRef, useMapStatus } from "./context";
 import { useCallback } from "react";
-import { useInDarkMode } from "@macrostrat/ui-components";
 
 /** A newer and more flexible version of useMapConditionalStyle */
 export function useMapStyleOperator(
   operator: (map: mapboxgl.Map) => void,
   dependencies: any[] = []
 ) {
   const mapRef = useMapRef();
-  const { isStyleLoaded } = useMapStatus();
+  const isStyleLoaded = useMapStatus((s) => s.isStyleLoaded);
   useEffect(() => {
     const map = mapRef.current;
     if (map == null) return;