[Help] the loading spinner is duplicated 'cuz of React.StrictMode

Ionic Framework Ionic React
1

the loading spinner wont go away:

const [showSpinner, hideSpinner] = useIonLoading();

useIonViewWillEnter(() => {
    showSpinner();
    

    fetchRequest()
      .then(...)
      .catch(...)
      .finally(() => {
        hideSpinner();
      });
  });

the request is duplicated 'cuz react is running in dev mode with StrictMode and everything is duplicated, even showSpinner is called twice…
how do I close all spinners when fetchRequest resolves?

2

Assuming you are using ion-loading for the loading spinner, the component takes an argument isOpen.

So you can do something like:

<IonLoading isOpen={!(data?.somePropertyThatIndicatesTheDataIsLoaded)} />

3

no, I’m using the hook, its literally the 1st line of code in my example…
but you were right, it works better with the inline component, it now dismisses right after the request completes

4

Yeah, what I wanted to say was “use the inline component instead of the hook.”

In general, I recommend using the inline components instead of the lifecycle hooks in Ionic React because the lifecycle hooks have a lot of gotchas and are hard to debug, whereas inline components are really simple.