Skip to content

Commit

Permalink
Feat: Display Loading UI when pathname changes using custom hook #61
Browse files Browse the repository at this point in the history
rmdnps10 committed Oct 11, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent d0bb16a commit b92eb1b
Showing 3 changed files with 49 additions and 21 deletions.
35 changes: 25 additions & 10 deletions src/app/component/Header.tsx
Original file line number Diff line number Diff line change
@@ -8,11 +8,24 @@ import { usePathname } from 'next/navigation'
import { AnimatePresence } from 'framer-motion'
import Loading from './Loading'
import useLoadingProgress from '@/hooks/useLoadingProgress'

//
//
//
export default function Header() {
const pathname = usePathname()
const isShowHeader = useScrollDirection()
const { isShowMobileMenu, showMobileMenu, hideMobileMenu } = useMobileMenu()
const pathname = usePathname()
const { isLoading, loadingProgress, startLoading } =
useLoadingProgress(pathname)

const handleMobileLinkClick = () => {
hideMobileMenu()
startLoading()
}

const handleLinkClick = () => {
startLoading()
}

const getLinkClass = (path: string) => {
return pathname === path
@@ -26,12 +39,10 @@ export default function Header() {
: 'px-[3rem] py-[1.1rem] block border-b border-white'
}

const { isLoading, loadingProgress } = useLoadingProgress(4)

return (
<>
<AnimatePresence>
{isLoading && <Loading progress={loadingProgress} />}
{isLoading && <Loading loadingProgress={loadingProgress} />}
</AnimatePresence>
<header
className={`text-white mix-blend-difference w-full flex fixed top-0 p-[2.5rem] transition-transform duration-500 ${
@@ -47,16 +58,19 @@ export default function Header() {
<nav className="ml-auto hidden tablet:flex gap-[1.5rem]">
<Link
href={'/about'}
onClick={handleLinkClick}
className={getLinkClass('/about')}>
About
</Link>
<Link
href={'/project'}
onClick={handleLinkClick}
className={getLinkClass('/project')}>
Project
</Link>
<Link
href={'/people'}
onClick={handleLinkClick}
className={getLinkClass('/people')}>
People
</Link>
@@ -67,6 +81,7 @@ export default function Header() {
</Link>
<Link
href={'/contact'}
onClick={handleLinkClick}
className={getLinkClass('/contact')}>
Contact
</Link>
@@ -104,31 +119,31 @@ export default function Header() {
<ul className="font-pp text-[3.2rem] font-[300]">
<Link
href="/about"
onClick={hideMobileMenu}
onClick={handleMobileLinkClick}
className={getMobileLinkClass('/about')}>
About
</Link>
<Link
href="/people"
onClick={hideMobileMenu}
onClick={handleMobileLinkClick}
className={getMobileLinkClass('/people')}>
People
</Link>
<Link
href="/project"
onClick={hideMobileMenu}
onClick={handleMobileLinkClick}
className={getMobileLinkClass('/project')}>
Project
</Link>
<Link
href="/recruit"
onClick={hideMobileMenu}
onClick={handleMobileLinkClick}
className={getMobileLinkClass('/recruit')}>
Recruit
</Link>
<Link
href="/contact"
onClick={hideMobileMenu}
onClick={handleMobileLinkClick}
className={getMobileLinkClass('/contact')}>
Contact
</Link>
10 changes: 7 additions & 3 deletions src/app/component/Loading.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import React from 'react'
import { motion } from 'framer-motion'

export default function Loading({ progress }: { progress: number }) {
const progressNormalized = progress / 100
export default function Loading({
loadingProgress
}: {
loadingProgress: number
}) {
const progressNormalized = loadingProgress / 100
const backgroundColor = `rgb(${255 * progressNormalized}, ${255 * progressNormalized}, ${255 * progressNormalized})`

return (
@@ -12,7 +16,7 @@ export default function Loading({ progress }: { progress: number }) {
transition={{ duration: 0.5 }}
style={{ backgroundColor }}
className="fixed top-0 left-0 w-screen h-screen flex justify-end items-center pr-[10vw] text-white font-pp font-light text-[8vw] z-[9000]">
<h1 className="mix-blend-difference">{progress}%</h1>
<h1 className="mix-blend-difference">{loadingProgress}%</h1>
</motion.div>
)
}
25 changes: 17 additions & 8 deletions src/hooks/useLoadingProgress.ts
Original file line number Diff line number Diff line change
@@ -2,26 +2,35 @@ import { useEffect, useState } from 'react'
//
//
//
const useLoadingProgress = (speed: number) => {
const useLoadingProgress = (pathname: string) => {
const [isLoading, setIsLoading] = useState(true)
const [loadingSpeed, setLoadingSpeed] = useState(10)
const [loadingProgress, setLoadingProgress] = useState(0)

const handleLoadingComplete = () => {
setIsLoading(false)
const startLoading = () => {
setIsLoading(true)
}

useEffect(() => {
if (isLoading && loadingProgress < 100) {
const timer = setTimeout(() => {
setLoadingProgress(prev => Math.min(prev + 1, 100)) // 10%씩 증가
}, speed) // 0.5초마다 업데이트
setLoadingProgress(prev => Math.min(prev + 1, 100))
}, loadingSpeed)
return () => clearTimeout(timer)
} else if (loadingProgress === 100) {
setTimeout(() => setIsLoading(false), 1000)
setTimeout(() => {
setIsLoading(false)
setLoadingProgress(0)
}, 400)
}
}, [isLoading, loadingProgress, speed])
}, [isLoading, loadingProgress, loadingSpeed])

return { isLoading, loadingProgress }
return {
isLoading,
loadingProgress,
setLoadingSpeed,
startLoading
}
}

export default useLoadingProgress

0 comments on commit b92eb1b

Please sign in to comment.