i made my context.js file to test if user is logged in :

export const myContext = createContext({});
export default function Context(props) {

    const [userObject, setUserObject] = useState();

    useEffect(() => {
        axios.get("http://localhost:3030/getuser", { withCredentials: true }).then((res) => {
           
            if (res.data) {
                setUserObject(res.data);
            }
        })
    }, [])
    return (
        <myContext.Provider value={userObject}>{props.children}</myContext.Provider>
    )
}

**everything is working perfect and im abla to login and logout ** , the only problem is when when i log in and refresh the page i still see the loginpage for a seconde (because its making the request to backend ) im using my context like this in :

const App = () => {
 const userObject = useContext(myContext);
 console.log("userObject: ",userObject);
  return (
    <div className="App">
      {/* <Header /> */}
      <UserBubble />
      <Home />
     { userObject ? (<h1>Welcome {userObject.email}</h1>) : <Login /> }
      
    </div>
  );
};
export default App;

so basically the userObject Load up as undefined or Null before it makes the request to backend and then will change back after the response to fix every thing ..

the Question is : how can i prevent that delay from happening and get the user object with the response without delaying that few seconds ... thank you **