rubix-explore/src/pages/SplashScreen.jsx

import React from "react";
import { OPACITY_ON_LOAD } from "../Layout/animations";
import { Box, Image, useColorMode } from "@chakra-ui/react";
import logo from "../assets/images/rubix.png";
import logoLight from "../assets/images/rubixlogo.svg";
import rubixLoaders from "../assets/images/rubixLoader.gif";

const SplashScreen = () => {
    const { colorMode } = useColorMode();

  return <Box zIndex={1000} bg={'#fff'} h={'100vh'} display={'flex'} justifyContent={'center'} alignItems={'center'}  {...OPACITY_ON_LOAD}>

<Image
                src={colorMode === "light" ? rubixLoaders : rubixLoaders}
                // width={"120px"}
                width={{base:"50%",md : "25%"}}
              />
  </Box>;
};

export default SplashScreen;