"use client";

import NextTopLoader from 'nextjs-toploader';
import { useToken } from '@chakra-ui/react';
import { useEffect, useState } from 'react';

export default function TopLoader() {
  const [color] = useToken('colors', ['primary.500']);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return <NextTopLoader color={color || '#319795'} showSpinner={false} />;
}
