the first useEffect seems to contradict with my globeComponent: import { motion } from "framer-motion";
import React, { useState, useEffect } from "react";
import { useRouter } from "next/router";
import ParticlesContainer from "./ParticlesContainer";
import { useGlobe } from '../components/globe/globeContext';
  
const Transition = () => {
  const [isMobileView, setIsMobileView] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const router = useRouter(); 
  const { globeReady } = useGlobe();
  let transitionDelay;

  const baseDelay = router.pathname === '/' ? 0.2 : 0.2;


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

  useEffect(() => {
    function handleResize() {
      // Safeguarding window access
      if (typeof window !== 'undefined') {
    if (window.innerWidth < 768) {
      setIsMobileView(true);
    } else {
      setIsMobileView(false);
    }
  }
}

// Since we're using window, we safeguard the entire effect
if (typeof window !== 'undefined') {
  handleResize();
  window.addEventListener('resize', handleResize);
}

// Cleanup
return () => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('resize', handleResize);
  }
};
}, []);

  useEffect(() => {
    // If we're on the homepage and globe is ready, set loaded to true
    if (router.pathname === '/' && globeReady) {
        setIsLoaded(true);
    } else if(router.pathname!== '/') {
        setIsLoaded(true);
      }
  }, [globeReady, router.pathname]);

 if (router.pathname === '/' && !globeReady) {
     transitionDelay = globeReady ? baseDelay : Infinity;
 } else if (router.pathname !== '/' && !globeReady) {
   transitionDelay = baseDelay;
 }

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

          <motion.div
            className="pt-5 text-center sm:px-6 lg:px-8 font-bold"
            style={{
              position: 'absolute',
              textAlign: 'center',
              top: '100%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              width: '500px',
              height: '500px',
              fontSize: '1.2rem',
            }}>
            loading ...
          </motion.div>
          {!isMobileView && (
                <ParticlesContainer />
          )}
          
        </motion.div>
      )}
      <motion.div
        role="status"
        className="fixed top-0 bottom-0 right-full w-screen h-screen z-20 bg-gradient-to-tl from-violet-900 to-zinc-800"
        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-screen h-screen z-10 bg-gradient-to-tl from-violet-900 to-blue-600"
        variants={transitionVariants}
        initial="initial"
        animate="animate"
        exit="exit"
        transition={{ delay: 0.6, duration: 0.6, ease: "easeInOut" }}
        aria-hidden
      />
       
    </>
  );
};

export default Transition;
   GlobeComponent: import React, { useEffect, useState, useRef } from 'react';
import Globe from 'react-globe.gl';
import * as THREE from 'three';
import { useRouter } from 'next/router';
import { useGlobe } from '../components/globe/globeContext';
import countries from './files/globe-data-min.json';
import travelHistory from './files/my-flights.json';
import airportHistory from './files/my-airports.json'; 


const GlobeComponent = () => {
    const [arcsData, setArcsData] = useState([]);
    const { setGlobeReady } = useGlobe();  
    const router = useRouter();
    const globeRef = useRef();
    const [dimensions, setDimensions] = useState({ width: 500, height: 500 });

    useEffect(() => {
        // Function to update the dimensions state based on the window size
        const handleResize = () => {
            if (window.matchMedia("(min-width: 960px)").matches) {
        // If the screen width is larger than or equal to ‘lg’ breakpoint, set to desktop size
        setDimensions({ width: 1000, height: 1000 });
            } else {
                // If smaller, set to mobile size
                setDimensions({ width: 450, height: 450 });
            }
        };

        // Set the initial globe size on component mount
        handleResize();

        // Add event listener for window resize
        window.addEventListener('resize', handleResize);

        // Remove event listener on cleanup
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    useEffect(() => {
        // Check if the globe instance is loaded
        if (globeRef && globeRef.current) {
                const kenyaCoordinates = {
                    lat: 2.286389, // latitude for Nairobi, Kenya
                    lng: 18.82023 // longitude for Nairobi, Kenya
                   
                };
                globeRef.current.pointOfView(kenyaCoordinates, 3000); // Animate the camera movement over 3000ms (3 seconds)
        }
    }, []);

    useEffect(() => {
        const handleRouteChange = () => {
            // You could update state here to ensure fresh data is fetched when a route changes
            setArcsData(travelHistory.flights);
        };

        router.events.on('routeChangeComplete', handleRouteChange);

        // Fetch the initial data
        setArcsData(travelHistory.flights);

        return () => {
            router.events.off('routeChangeComplete', handleRouteChange);
        };
    }, [router.events]);

    return (
        <Globe
            ref={globeRef}
            hexPolygonsData = { countries.features }
            hexPolygonResolution = { 3}
            hexPolygonMargin = {0.75}
            hexPolygonAltitude = {0.01}
            hexPolygonUseDots = {false}
            enablePointerInteraction ={false}
            onGlobeReady={() => setGlobeReady(true)}
            showAtmosphere = { true}
            atmosphereColor="#ffffff"
            atmosphereAltitude = { 0.12}
            backgroundColor="rgba(0, 0, 0, 0)" 
            globeImageUrl="//unpkg.com/three-globe/example/img/earth-dark.jpg"            
            hexPolygonColor = {(e) => {
            return ["KEN", "CHN", "FRA", "ZAF", "JPN", "USA", "AUS", "CAN"].includes(e.properties.ISO_A3)
                ? "#9cff00"
            : "rgba(255, 255, 255, 0.5)";
            }}
            width={dimensions.width}
            height={dimensions.height}
            arcsData={arcsData}
            arcColor = {(e) => {
                return e.status ? "#9cff00" : "#f13024";
            }}
            arcAltitude = {(e) => {
                return e.arcAlt;
            }}
            arcStroke = {(e) => {
                return e.status ? 0.5 : 0.3;
            }}
            arcDashLength = { 0.9}
            arcDashGap = { 4}
            arcDashAnimateTime = { 1000}
            arcsTransitionDuration = { 1000}
            arcDashInitialGap = {(e) => e.order * 1}
            labelsData = { airportHistory.airports }
            labelColor={() => "#ffffff"}
            labelDotOrientation = {(e) => {
                return e.text === "NGA" ? "top" : "right";
            }}
            labelDotRadius = { 0.35}
            labelSize = {1.1}
            labelText = {"city" }
            labelResolution = { 6}
            labelAltitude = { 0.07}
            pointsData = { airportHistory.airports }
            pointColor={() => "#ffffff"}
            pointsMerge = { true}
            pointAltitude = { 0.07}
            pointRadius = { 0.10}
        />
    );
};

export default GlobeComponent;