the value of useApiIsLoaded, useApiLoadingStatus does not change

[abb438]

It is written using translation software. Sorry if there are any unnatural points.

I tried to get the load status of the map, but the value does not change from false or not_loaded.
const status = useApiLoaded();
useEffect(() => {
cosnole.log(status);
}, [status]);

I believe this is the value used to get the spinner while the map is loading, am I wrong?
The useApiLoadingStatus value does not change as well.

[mrMetalWood]

Hi @abb438.

Where are you trying to use the hooks? They can only be used in a child component of the component where the APIProvider is used.

So this will NOT work:

const App = () => {
  const status = useApiLoadingStatus();
  const apiIsLoaded = useApiIsLoaded();

  useEffect(() => {
    console.log(status);
  }, [status]);

  useEffect(() => {
    console.log(apiIsLoaded);
  }, [apiIsLoaded]);

  return (
    <APIProvider apiKey={API_KEY}>
      <Map
        defaultZoom={3}
        defaultCenter={{lat: 22.54992, lng: 0}}
        gestureHandling={'greedy'}
        disableDefaultUI={true}
      />
    </APIProvider>
  );
};

Something like this will work:

const App = () => {
  return (
    <APIProvider apiKey={API_KEY}>
      <Map
        defaultZoom={3}
        defaultCenter={{lat: 22.54992, lng: 0}}
        gestureHandling={'greedy'}
        disableDefaultUI={true}
      />
      <MyComponent />
    </APIProvider>
  );
};

const MyComponent = () => {
  const status = useApiLoadingStatus();
  const apiIsLoaded = useApiIsLoaded();

  useEffect(() => {
    console.log(status);
  }, [status]);

  useEffect(() => {
    console.log(apiIsLoaded);
  }, [apiIsLoaded]);

  return <div>my component</div>;
}

Note how the MyComponent is a child component of the app component.

[abb438]

I'm sorry for the delayed response.
I understood. When I was using another library, I was displaying a spinner until the mapscript itself was loaded. I was trying to do something similar within the App component, as mentioned in your example.
The code is a bit ad hoc, but it looks something like this.

`const App = () => {
  const apiIsLoaded = useApiIsLoaded();

  useEffect(() => {
    console.log(apiIsLoaded);
  }, [apiIsLoaded]);

  return (
    <APIProvider apiKey={API_KEY}>
      {!apiIsLoaded ? (
        <Spinner>Map is loading...<Spinner/>
      ) : (
      <Map
        defaultZoom={3}
        defaultCenter={{lat: 22.54992, lng: 0}}
        gestureHandling={'greedy'}
        disableDefaultUI={true}
      />)
      }
    </APIProvider>
};`

[mrMetalWood]

Yes, that will not work because the you are trying to use the hook in the same component that the APIProvider is used. One way to do it would be wrap your component. Something like this:

const App = () => {
  return (
    <APIProvider apiKey={API_KEY}>
      <MapComponent />
    </APIProvider>
  );
};

const MapComponent = () => {
  const apiIsLoaded = useApiIsLoaded();

  useEffect(() => {
    console.log(apiIsLoaded);
  }, [apiIsLoaded]);

  return !apiIsLoaded ? (
    <Spinner>Map is loading...</Spinner>
  ) : (
    <Map
      defaultZoom={3}
      defaultCenter={{lat: 22.54992, lng: 0}}
      gestureHandling={'greedy'}
      disableDefaultUI={true}
    />
  );
};

That should work.

[abb438]

Thank you for the very clear explanation.
I didn't get the rudimentary idea of wrapping components.
I am considering migrating from another maps library, but am struggling with the differences in usability...