Home.tsx

import { IonButton, IonContent, IonHeader, IonLoading, IonPage, IonTitle, IonToolbar, useIonLoading } from '@ionic/react';
import { useEffect, useState } from 'react';
import ExploreContainer from '../components/ExploreContainer';
import './Home.css';

const Home: React.FC = () => {
  const [showLoading, dismissLoading] = useIonLoading();
  const [showLoadingPopop, setshowLoadingPopop] = useState(false);

  const fakeDelay = async () => {
    return new Promise( (resolve) => {
      const timer = 20;
      setTimeout(() => {
        console.log(timer+' ms timer');
        resolve(true);
      }, timer);
    });
  };

  const tryPopUp = async () => {
    console.log('launch popup');
    showLoading('This wont dismiss');
    await fakeDelay()

    console.log('dismiss popup');
    dismissLoading();
  };

  const tryStatePopUp = async () => {
    console.log('launch state popup');
    setshowLoadingPopop(true);
    await fakeDelay()

    console.log('dismiss state popup');
    setshowLoadingPopop(false);
  };

  useEffect(() => {
    // tryPopUp();
  }, []);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Blank</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonLoading
          isOpen={showLoadingPopop}
          message="Loading Popup"
          />
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Blank</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer />
        <IonButton onClick={tryPopUp}>Open useIonLoading</IonButton>
        <IonButton onClick={tryStatePopUp}>Open State Overlay</IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Home;