import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { Box } from "@chakra-ui/react";
import { css, keyframes } from "@emotion/react";
import Image from "next/image";
import { useRouter } from "next/router";
import React from "react";
const pulse = keyframes `
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0.5;
    }
`;
const Loading = () => {
    const [loading, setLoading] = React.useState(false);
    const router = useRouter();
    React.useEffect(() => {
        router.events.on("routeChangeStart", () => {
            setLoading(true);
        });
        router.events.on("routeChangeComplete", () => {
            setTimeout(() => setLoading(false), 1000);
        });
        router.events.on("routeChangeError", () => {
            setLoading(false);
        });
    }, [router]);
    return (_jsx(Box, Object.assign({ position: "absolute", top: "0", bottom: "0", right: "0", left: "0", height: "100vh", width: "100vw", display: loading ? "flex" : "none", alignItems: "center", justifyContent: "center", background: "white", zIndex: "10" }, { children: _jsx(Image, { className: "w-42 animate-pulse", width: "124px", height: "32px", css: css `
          animation: ${pulse} 1s infinite;
        `, src: "/assets/qore-logo.svg", alt: "Qore" }) })));
};
export default Loading;
//# sourceMappingURL=Loading.js.map