59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
import IconButton from './IconButton';
|
|
import { useEffect, useState, useTransition } from 'react';
|
|
import { cc } from '@/utility/css';
|
|
|
|
export default function IconPathButton({
|
|
path,
|
|
prefetch,
|
|
loaderDelay = 250,
|
|
children,
|
|
}: {
|
|
path: string
|
|
prefetch?: boolean
|
|
loaderDelay?: number
|
|
children: React.ReactNode
|
|
}) {
|
|
const router = useRouter();
|
|
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const [shouldShowLoader, setShouldShowLoader] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (isPending) {
|
|
const timeout = setTimeout(() => {
|
|
setShouldShowLoader(true);
|
|
}, loaderDelay);
|
|
return () => clearTimeout(timeout);
|
|
} else {
|
|
setShouldShowLoader(false);
|
|
}
|
|
}, [isPending, loaderDelay]);
|
|
|
|
useEffect(() => {
|
|
if (prefetch) {
|
|
router.prefetch(path);
|
|
}
|
|
}, [prefetch, router, path]);
|
|
|
|
return (
|
|
<IconButton
|
|
onClick={() => startTransition(() =>
|
|
router.push(path))}
|
|
isLoading={shouldShowLoader}
|
|
className={cc(
|
|
'min-h-[1.75rem]',
|
|
'active:translate-y-[1px]',
|
|
'text-gray-500 active:text-gray-600',
|
|
'dark:text-gray-400 dark:active:text-gray-300',
|
|
)}
|
|
spinnerColor="text"
|
|
>
|
|
{children}
|
|
</IconButton>
|
|
);
|
|
}
|