The intended purpose of the transition is to show it on the screen as the route loads in the background(a form of delay to ensure all components on the route finish loading) whenever a route change occurs on the website. Currently the transition does not show at all: App.js: import React, { useEffect, useState} from "react";
import { BrowserRouter, Routes, Route, useLocation} from 'react-router-dom'
import Home from "./Home";
import Products from "./Products";
import Cart from "./Cart";
import SingleProduct from './SingleProduct'
import Error from "./Error";
import { GlobalStyle } from "./GlobalStyle";
import { ThemeProvider } from "styled-components";
import Header from "./components/Header";
import Footer from "./components/Footer";
import GoToTop from "./components/GoToTop";
import Transition from "./components/Transition";
import { extendTheme, ChakraProvider } from '@chakra-ui/react';

// Inside App.js, right above the App component definition

const RouteTransitionManager = () => {
  const location = useLocation(); // Now correctly used within the context of <BrowserRouter>
  const [isTransitioning, setIsTransitioning] = useState(false);

  useEffect(() => {
    setIsTransitioning(true);
    const timer = setTimeout(() => setIsTransitioning(false), 800); // Match with your transition duration
    return () => clearTimeout(timer);
  }, [location]);

  return isTransitioning ? <Transition /> : null;
};


const App = () => {
  const theme = {
    colors: {
      heading: "rgb(24 24 29)",
      text: "rgba(29 ,29, 29, .8)",
      white: "#fff",
      black: " #212529",
      helper: "#8490ff",

      bg: "#dee5f3",
      footer_bg: "#0a1435",
      btn: "rgb(98 84 243)",
      border: "rgba(98, 84, 243, 0.5)",
      hr: "#ffffff",
      gradient:
        "linear-gradient(0deg, rgb(132 144 255) 0%, rgb(98 189 252) 100%)",
      shadow:
        "rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;",
      shadowSupport: " rgba(0, 0, 0, 0.16) 0px 1px 4px",
    },
    media: {
      mobile: "768px",
      tab: "998px",
    },
  };
  const themeToast = extendTheme({
    components: {
      Toast: {
        baseStyle: {
          // Specify your custom styles here
          fontSize: "17px !important",
        },
      },
    },
  });

  return (
    <ChakraProvider theme={themeToast}>
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          <GlobalStyle />
          <Header />
          <RouteTransitionManager />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/products" element={<Products />} />
            <Route path="/singleproduct/:id" element={<SingleProduct />} />
            <Route path="/cart" element={<Cart />} />
            <Route path="*" element={<Error />} />
          </Routes>
          <GoToTop />
          <Footer />
        </BrowserRouter>
      </ThemeProvider>
    </ChakraProvider>
  );
};

export default App;
Transition.jsx: import { motion } from "framer-motion";
import React from "react";

const Transition = () => {


    const transitionVariants = {
        initial: {
            x: "100%",
            width: "100%",
        },
        animate: {
            x: "0%",
            width: "0%",
        },
        exit: {
            x: ["0%", "100%"],
            width: ["0%", "100%"],
        },
    };

    return (
        <>
            <motion.div
                role="status"
                className="fixed top-0 bottom-0 right-full w-full h-full z-30 bg-gradient-to-tl from-violet-900 to-black"
                variants={transitionVariants}
                initial="initial"
                animate="animate"
                exit="exit"
                transition={{ delay: 0.2, duration: 0.6, ease: "easeInOut" }}
                aria-hidden="true"
            >
                <motion.img
                    src="images/shop_logo.png"
                    alt="Descriptive text"
                    className="w-[300px] h-[300px] xl:w-[500px] xl:h-[500px]"
                    style={{
                        position: 'absolute',
                        top: '50%',
                        left: '50%',
                        transform: 'translate(-50%, -50%)',
                    }}
                />
                <motion.img
                    src="images/hand.gif"
                    alt="Descriptive text"
                    className="w-[300px] h-[300px] xl:w-[500px] xl:h-[500px]"
                    style={{
                        position: 'absolute',
                        top: '70%',
                        left: '50%',
                        transform: 'translate(-50%, -50%)',
                    }}
                />

                <motion.div
                    className="pt-5 text-center sm:px-6 lg:px-8 font-bold w-[300px] h-[300px] xl:w-[500px] xl:h-[500px]"
                    style={{
                        position: 'absolute',
                        textAlign: 'center',
                        top: '100%',
                        left: '50%',
                        transform: 'translate(-50%, -50%)',
                        fontSize: '1.2rem',
                    }}>
                    loading ...
                </motion.div>

            </motion.div>
            <motion.div
                role="status"
                className="fixed top-0 bottom-0 right-full w-full h-full z-20 bg-gradient-to-tl from-violet-900 to-blue-600"
                variants={transitionVariants}
                initial="initial"
                animate="animate"
                exit="exit"
                transition={{ delay: 0.4, duration: 0.6, ease: "easeInOut" }}
                aria-hidden
            />
            <motion.div
                role="status"
                className="fixed top-0 bottom-0 right-full w-full h-full z-10 bg-gradient-to-tl from-black to-violet-900"
                variants={transitionVariants}
                initial="initial"
                animate="animate"
                exit="exit"
                transition={{ delay: 0.6, duration: 0.6, ease: "easeInOut" }}
                aria-hidden
            />

        </>
    );
};

export default Transition;