Brief black screen transition page to page

Hi There,

I am new to the world of Ionic and I have just started a new project for the company where I work.
I am having a problem transitioning between my pages, a brief black screen appears when browsing.
The transition problem happens between the profile page and the information and application page

I drop you here the code of my App.tsx :

/* Import React and Ionic routing stack */
import { IonReactRouter } from "@ionic/react-router";
import { Redirect, Route } from "react-router";

/* Import Redux stack */
import { connect } from "react-redux";
import { sessionService } from "redux-react-session";

/* Import Ionic components*/
import {
    IonApp,
    IonIcon,
    IonLabel,
    IonRouterOutlet,
    IonTabBar,
    IonTabButton,
    IonTabs,
} from "@ionic/react";

/* Import Ionic icons */
import { home, document, book } from "ionicons/icons";

/* Import Pages components */
import Login from "./pages/Login/Login";
import Home from "./pages/Home/Home";
import Documents from "./pages/Documents/Documents";
import Carnet from "./pages/Carnet/Carnet";
import Profile from "./pages/Profile/Profile";
import Informations from "./pages/Profile/Informations/Informations";
import Application from "./pages/Profile/Application/Application";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import "./theme/variables.scss";

const App: React.FC<{
    checked: sessionService;
    authenticated: sessionService;
}> = ({ checked, authenticated }) => {
    return (
        <>
            {checked && (
                <IonApp>
                    <IonReactRouter>
                        {!authenticated ? (
                            <>
                                <Redirect exact from="/" to="/login" />
                                <Route path="/login">
                                    <Login />
                                </Route>
                            </>
                        ) : (
                            <>
                                <IonTabs>
                                    <IonRouterOutlet>
                                        <Route
                                            path="/"
                                            component={Home}
                                            exact={true}
                                        />
                                        <Route
                                            path="/documents"
                                            component={Documents}
                                            exact={true}
                                        />
                                        <Route
                                            path="/carnet"
                                            component={Carnet}
                                            exact={true}
                                        />
                                        <Route
                                            path="/profile"
                                            component={Profile}
                                            exact={true}
                                        />
                                        <Route
                                            path="/profile/informations"
                                            component={Informations}
                                            exact={true}
                                        />
                                        <Route
                                            path="/profile/application"
                                            component={Application}
                                            exact={true}
                                        />
                                    </IonRouterOutlet>
                                    <IonTabBar slot="bottom">
                                        <IonTabButton tab="home" href="/">
                                            <IonIcon
                                                icon={home}
                                                color="light"
                                            />
                                            <IonLabel color="light">
                                                Accueil
                                            </IonLabel>
                                        </IonTabButton>
                                        <IonTabButton
                                            tab="documents"
                                            href="/documents"
                                        >
                                            <IonIcon
                                                icon={document}
                                                color="light"
                                            />
                                            <IonLabel color="light">
                                                Documents
                                            </IonLabel>
                                        </IonTabButton>
                                        <IonTabButton
                                            tab="carnet"
                                            href="/carnet"
                                        >
                                            <IonIcon
                                                icon={book}
                                                color="light"
                                            />
                                            <IonLabel color="light">
                                                Carnet
                                            </IonLabel>
                                        </IonTabButton>
                                    </IonTabBar>
                                </IonTabs>
                            </>
                        )}
                    </IonReactRouter>
                </IonApp>
            )}
        </>
    );
};

const mapStateToProps = ({ session }: any) => ({
    checked: session.checked,
    authenticated: session.authenticated,
});

export default connect(mapStateToProps)(App);

Here, the code of the profile page :

/* Import Redux stack */
import { connect } from "react-redux";
import { logoutUser } from "../../authentication/actions/userAction";

/* Import React routing stack */
import { useHistory } from "react-router-dom";

/* Import Components */
import Header from "../../components/Header/Header";
import ContainerButton from "../../components/Container.Button/Container.Button";

/* Import Ionic components */
import {
    IonButton,
    IonCol,
    IonContent,
    IonGrid,
    IonIcon,
    IonPage,
    IonRow,
    IonTitle,
} from "@ionic/react";

/* Import Ionic icons */
import { information, chevronForward, power } from "ionicons/icons";

/* Import Interface and Type values */
import { IUser, ILogoutUser } from "../../interfaces/interfaces";

/* Import SCSS */
import Style from "./Profile.module.scss";

const Profile: React.FC<{ userData: IUser; logoutUser: ILogoutUser }> = ({
    userData,
    logoutUser,
}) => {
    const history = useHistory();

    return (
        <IonPage className={Style.page__container}>
            <Header userData={userData} headerTitle="Mon Profil" />
            <IonContent fullscreen>
                <IonGrid className={Style.page__container__grid}>
                    <IonRow>
                        <IonCol>
                            <ContainerButton
                                iconTitle={chevronForward}
                                buttonTitle="Mes informations"
                                href="/profile/informations"
                            />
                        </IonCol>
                        <IonCol>
                            <ContainerButton
                                iconTitle={information}
                                buttonTitle="Informations sur l'application"
                                href="/profile/application"
                            />
                        </IonCol>
                        <IonCol>
                            <IonButton
                                onClick={(event) => {
                                    event.preventDefault();
                                    logoutUser(history);
                                }}
                                color="light"
                                className={Style.page__containter__button}
                                expand="block"
                            >
                                <IonTitle
                                    slot="start"
                                    className={
                                        Style.page__container__button__title
                                    }
                                >
                                    Deconnexion
                                </IonTitle>
                                <IonIcon
                                    slot="end"
                                    color="primary"
                                    icon={power}
                                />
                            </IonButton>
                        </IonCol>
                    </IonRow>
                </IonGrid>
            </IonContent>
        </IonPage>
    );
};

const mapStateToProps = ({ session }: any) => ({
    userData: session.user[0],
});

export default connect(mapStateToProps, { logoutUser })(Profile);

Do you have an idea of what’s wrong with my architecture or routing?

Thank you in advance.
David

I don’t use redux so I’m not sure exactly about your problem, but I have seen a black flash/flicker using react-query and <Suspense>.

In my case, what happens is that React seems to batch the renders in some cases with <Suspense>, which causes the render to be delayed, which results in a black flicker.

This only happens during the initial <Suspense> and can be worked around by prefetching first.

You may be able to do something similar in your case.

1 Like

Thank you Kenny, I’m gonna watching this link, thanks for your advise.