Skip to content

Fixed glitchy transition on initial rendering #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arizakevin wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fixed glitchy transition on initial rendering #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 90 additions & 55 deletions src/pages/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,40 +15,40 @@ import {
IonToolbar,
useIonLoading,
useIonRouter,
} from '@ionic/react';
import React, { useEffect, useState } from 'react';
import { logInOutline, personCircleOutline } from 'ionicons/icons';
import FCC from '../assets/fcc.svg';
import Intro from '../components/Intro';
import { Preferences } from '@capacitor/preferences';
} from "@ionic/react";
import React, { useEffect, useState } from "react";
import { logInOutline, personCircleOutline } from "ionicons/icons";
import FCC from "../assets/fcc.svg";
import Intro from "../components/Intro";
import { Preferences } from "@capacitor/preferences";

const INTRO_KEY = 'intro-seen';
const INTRO_KEY = "intro-seen";

const Login: React.FC = () => {
const router = useIonRouter();
const [introSeen, setIntroSeen] = useState(true);
const [introSeen, setIntroSeen] = useState<boolean | null>(null);
const [present, dismiss] = useIonLoading();

useEffect(() => {
const checkStorage = async () => {
const seen = await Preferences.get({ key: INTRO_KEY });
setIntroSeen(seen.value === 'true');
setIntroSeen(seen.value === "true");
};
checkStorage();
}, []);

const doLogin = async (event: any) => {
event.preventDefault();
await present('Logging in...');
await present("Logging in...");
setTimeout(async () => {
dismiss();
router.push('/app', 'root');
router.push("/app", "root");
}, 2000);
};

const finishIntro = async () => {
setIntroSeen(true);
Preferences.set({ key: INTRO_KEY, value: 'true' });
Preferences.set({ key: INTRO_KEY, value: "true" });
};

const seeIntroAgain = () => {
Expand All @@ -58,54 +58,89 @@ const Login: React.FC = () => {

return (
<>
{!introSeen ? (
{introSeen === false ? (
<Intro onFinish={finishIntro} />
) : (
<IonPage>
<IonHeader>
<IonToolbar color={'success'}>
<IonTitle>Free Code Camp</IonTitle>
</IonToolbar>
</IonHeader>
introSeen === true && (
<IonPage>
<IonHeader>
<IonToolbar color={"success"}>
<IonTitle>Free Code Camp</IonTitle>
</IonToolbar>
</IonHeader>

<IonContent scrollY={false} className="ion-padding">
<IonGrid fixed>
<IonRow class="ion-justify-content-center">
<IonCol size="12" sizeMd="8" sizeLg="6" sizeXl="4">
<div className="ion-text-center ion-padding">
<img src={FCC} alt="FCC Logo" width={'50%'} />
</div>
</IonCol>
</IonRow>
<IonContent scrollY={false} className="ion-padding">
<IonGrid fixed>
<IonRow class="ion-justify-content-center">
<IonCol size="12" sizeMd="8" sizeLg="6" sizeXl="4">
<div className="ion-text-center ion-padding">
<img src={FCC} alt="FCC Logo" width={"50%"} />
</div>
</IonCol>
</IonRow>

<IonRow class="ion-justify-content-center">
<IonCol size="12" sizeMd="8" sizeLg="6" sizeXl="4">
<IonCard>
<IonCardContent>
<form onSubmit={doLogin}>
<IonInput mode="md" fill="outline" labelPlacement="floating" label="Email" type="email" placeholder="simon@ionicacademy.com"></IonInput>
<IonInput mode="md" className="ion-margin-top" fill="outline" labelPlacement="floating" label="Password" type="password" placeholder="simon@ionicacademy.com"></IonInput>
<IonButton type="submit" expand="block" className="ion-margin-top">
Login
<IonIcon icon={logInOutline} slot="end" />
</IonButton>
<IonButton routerLink="/register" color={'secondary'} type="button" expand="block" className="ion-margin-top">
Create account
<IonIcon icon={personCircleOutline} slot="end" />
</IonButton>
<IonRow class="ion-justify-content-center">
<IonCol size="12" sizeMd="8" sizeLg="6" sizeXl="4">
<IonCard>
<IonCardContent>
<form onSubmit={doLogin}>
<IonInput
mode="md"
fill="outline"
labelPlacement="floating"
label="Email"
type="email"
placeholder="simon@ionicacademy.com"
></IonInput>
<IonInput
mode="md"
className="ion-margin-top"
fill="outline"
labelPlacement="floating"
label="Password"
type="password"
placeholder="simon@ionicacademy.com"
></IonInput>
<IonButton
type="submit"
expand="block"
className="ion-margin-top"
>
Login
<IonIcon icon={logInOutline} slot="end" />
</IonButton>
<IonButton
routerLink="/register"
color={"secondary"}
type="button"
expand="block"
className="ion-margin-top"
>
Create account
<IonIcon icon={personCircleOutline} slot="end" />
</IonButton>

<IonButton onClick={seeIntroAgain} fill="clear" size="small" color={'medium'} type="button" expand="block" className="ion-margin-top">
Watch intro again
<IonIcon icon={personCircleOutline} slot="end" />
</IonButton>
</form>
</IonCardContent>
</IonCard>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
<IonButton
onClick={seeIntroAgain}
fill="clear"
size="small"
color={"medium"}
type="button"
expand="block"
className="ion-margin-top"
>
Watch intro again
<IonIcon icon={personCircleOutline} slot="end" />
</IonButton>
</form>
</IonCardContent>
</IonCard>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
)
)}
</>
);
Expand Down