Router Navigation Indicator

RouteProgressBar.tsx

import { useTheme } from "@chakra-ui/react";
import { AnimatePresence, motion } from "framer-motion";
import { useRouter } from "next/router";
import { FC, useEffect, useState } from "react";

/**
 * Little component for Next.js that implements a UI indicator for route navigation. Made with Framer Motion
 * Should be absolute positioned to the top of the page
 * NOTE: Next.js 13 is not supported, as it has a different router implementation
 */
export const RouteProgressBar: FC = () => {
  const router = useRouter();
  // You can use basically anything as long as you define a color for the progress bar
  const theme = useTheme();
  const [routeChanging, setRouteChanging] = useState(false);

  useEffect(() => {
    const handleStart = () => setRouteChanging(true);
    const handleComplete = () => setRouteChanging(false);

    router.events.on("routeChangeStart", handleStart);
    router.events.on("routeChangeComplete", handleComplete);
    router.events.on("routeChangeError", handleComplete);

    return () => {
      router.events.off("routeChangeStart", handleStart);
      router.events.off("routeChangeComplete", handleComplete);
      router.events.off("routeChangeError", handleComplete);
    };
  });

  return (
    <AnimatePresence>
      {routeChanging && (
        <motion.div
          initial={{ width: "0%" }}
          animate={{ width: "25%" }}
          exit={{ opacity: 0, width: "100%" }}
          style={{
            position: "fixed",
            top: "0",
            height: "4px",
            backgroundColor: theme.colors.primary.base,
          }}
        ></motion.div>
      )}
    </AnimatePresence>
  );
};