redhare-demo/components/loading/PageLoading.jsx

42 lines
875 B
JavaScript

'use client'
import { usePathname, useSearchParams } from 'next/navigation'
import { useEffect, useState } from 'react'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { BigLoading } from 'components'
NProgress.configure({ showSpinner: false })
export default function PageLoading() {
//? Assets
const pathname = usePathname()
const searchParams = useSearchParams()
//? States
const [loading, setLoading] = useState(false)
//? Re-Renders
useEffect(() => {
setLoading(false)
NProgress.done()
return () => {
setLoading(true)
NProgress.start()
}
}, [pathname, searchParams])
//? Render(s)
return (
loading && (
<div className="fixed inset-0 z-40 ">
<div className="grid h-full bg-blue-50/30 place-items-center ">
<BigLoading />
</div>
</div>
)
)
}