add epic progress bar

[hakimLyon]

This PR aims to enhance the user experience by adding the NProgress. NProgress is a lightweight tool that provides an elegant and responsive loading progress bar, which will help users better understand the status of ongoing operations.

Screenshots

Enregistrement.de.l.ecran.2023-09-23.a.12.12.26.mov

[kentcdodds]

Thanks for this! I'd welcome an example, but I'm not sure I want to bring NProgress into the project. I don't think it's worth the amount of code it requires. I'd prefer to find something smaller and more modern or build something more custom.

To be clear, I'm fine with the way it looks. Just the module hasn't been updated in three years and the code is still using UMD which is suboptimal.

Also, I'd also recommend using https://npm.im/spin-delay to avoid having it show up for fast page transitions.

So, would be be willing to change this PR to add an example?

[hakimLyon]

Yea Of course, I will add an example. I have considered your feedback, and I have found a custom component to manage the progress bar.

What are your thoughts on this?

import { useNavigation } from '@remix-run/react'
import React, { useEffect, useRef, useState } from 'react'
import { useSpinDelay } from 'spin-delay'
import { cn } from '#app/utils/misc.tsx'

function EpicProgress() {
	const transition = useNavigation()
	const busy = transition.state !== 'idle'
	const delayedPending = useSpinDelay(busy, {
		delay: 400,
		minDuration: 300,
	})
	const ref = useRef<HTMLDivElement>(null)
	const [animationComplete, setAnimationComplete] = useState(true)

	useEffect(() => {
		if (!ref.current) return
		if (delayedPending) setAnimationComplete(false)

		const animationPromises = ref.current
			.getAnimations()
			.map(({ finished }) => finished)

		Promise.allSettled(animationPromises).then(() => {
			if (!delayedPending) setAnimationComplete(true)
		})
	}, [delayedPending])

	return (
		<div
			role="progressbar"
			aria-hidden={!delayedPending}
			aria-valuetext={delayedPending ? 'Loading' : undefined}
			className="fixed inset-x-0 left-0 top-0 z-50 h-[0.20rem] animate-pulse"
		>
			<div
				ref={ref}
				className={cn(
					'h-full bg-blue-500 transition-all duration-300 ease-in-out',
					transition.state === 'idle' &&
						animationComplete &&
						'w-0 opacity-0 transition-none',
					transition.state === 'submitting' && 'w-1/12',
					transition.state === 'loading' && 'w-2/12',
					transition.state === 'idle' && !animationComplete && 'w-full',
				)}
			/>
			{delayedPending && (
				<div className="absolute inset-0 flex items-center justify-center">
					<div className="h-5 w-5 absolute right-0 top-[6px] animate-spin rounded-full border-t-2 border-blue-500" />
				</div>
			)}
		</div>
	)
}

export { EpicProgress }

[kentcdodds]

Hey, that actually looks really great! Thanks for working on that 👍👍

[hakimLyon]

Hey, that actually looks really great! Thanks for working on that 👍👍

Here is the example. Epic Stack with Progress Bar

[kentcdodds]

Sorry, I should have been more specific. Your solution looks great, let's go ahead and build it into the stack itself. No example necessary 😁

[kasperpeulen]

Love it

[kentcdodds]

Thank you!