How to detect start and finish, and percent of loading in ProgressBar in NextJS 14-15

[mauserez]

Feature Description

It would be nice to add the ability to track the progress bar status in useProgress.
Now i can't use it.

Or do you already have a possible solution for Next.js?

Use Cases

For example I want to create custom component and detect isStarted, isFinished
`
export function PageProgressBar(props: PageProgressBarProps) {
const [visible, setVisible] = useState(false);
const {isStarted, isFinished} = useProgress();

useEffect(() => {
    if (isStarted) {
        setVisible(true);
    }
}, [isStarted]);

useEffect(() => {
    if (isFinished) {
        setVisible(false);
    }
}, [isFinished]);

return (
    <div
        className={cn({
            hidden: !visible,
            'absolute overflow-hidden top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2  w-[250px] h-[250px] rounded-[36px] z-[8888] bg-white':
                true,
        })}
    >
        <Progress>
            <Bar>
                <Peg />
            </Bar>
            <Spinner>
                <SpinnerIcon />
            </Spinner>
        </Progress>
    </div>
);

}
`

Package

No response

Additional context

No response

[mauserez]

@imskyleen Could you answer please) ?