React Lazy Loading Routes with Page Transitions

Looking up, down, and sideways for a solution to this problem.

My goal is to assign Lazy Loading to nearly all components in my React website. However, these components utilize framer-motion page transitions when the components enter and exit. The combination of page transitions and lazy loading is causing the component to no longer load properly when clicked on as a Route.

I found inspiration from this post ( and tried to introduce the "react-lazy-with-preload" package (, however I was unsuccessful in getting it to work.

Is anyone aware of a solution to this issue? I surely can't be the only person trying to data split a React website at the component level while also having page-transitions in each of the components.

App.js Code below:

import React, { Suspense } from 'react';
import { Switch, Route, useLocation } from 'react-router-dom';
import lazy from "react-lazy-with-preload";
import { AnimatePresence } from 'framer-motion';

import Navbar from './components/layout/Navbar/Navbar';
import Footer from './components/layout/Footer/Footer';
import Home from './components/layout/Homepage/Home';
const Dashboard = lazy(() => import('./components/dashboard/Dashboard'));
const Login = lazy(() => import('./components/authorization/login/LoginComponent'));
const SignUp = lazy(() => import('./components/authorization/signup/SignupComponent'));
const OurTeam  = lazy(() => import( './components/layout/OurTeam/OurTeam'));

function App () {

  let location = useLocation();

  //Trying to preload the components which contain Page-Transitions

    return (
        <div className='page-container'>

          <div className='content-wrap'>

            <Navbar />

            <AnimatePresence exitBeforeEnter> {/* Exit page transition occurs before next page loads. */}

            <ScrollToTop/> {/* Causes the screen to scroll to the top after routing occurs. */}

              <Switch location={location} key={location.pathname}> {/* Switch is used to make sure only 1 route is loaded up at a time. location and key are used for page transition animation.*/}
                {/*Homepage will not be data-split and will always be loaded */}
                <Route exact path='/' component={Home} />

                <Suspense fallback='Loading...'>
                  <Route path='/OurTeam' component={OurTeam} />
                <Suspense fallback='Loading...'>
                  <Route path='/dashboard' component={Dashboard}/>

                <Suspense fallback='Loading...'>
                <Route path='/login' component={Login} />

                <Suspense fallback='Loading...'>
                  <Route path='/signup' component={SignUp} />





export default App;