Skip to content

Instantly share code, notes, and snippets.

@simb

simb/Home.tsx Secret

Last active Apr 22, 2021
Embed
What would you like to do?
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment