cc4453ae4c
The loading bar's completion property on unmounting has been removed to make its behavior more consistent. The css classes have been updated for spinner animation: The 'zoom-in-80' class was changed to 'zoom-in-50' and 'slide-in-from-bottom-4' was added. Also, the react-top-loading-bar's continuous start time has been increased to 300.
41 lines
712 B
TypeScript
41 lines
712 B
TypeScript
'use client';
|
|
|
|
import { createRef, useEffect } from 'react';
|
|
|
|
import type { LoadingBarRef } from 'react-top-loading-bar';
|
|
import LoadingBar from 'react-top-loading-bar';
|
|
|
|
let running = false;
|
|
|
|
export function TopLoadingBarIndicator() {
|
|
const ref = createRef<LoadingBarRef>();
|
|
|
|
useEffect(() => {
|
|
if (!ref.current || running) {
|
|
return;
|
|
}
|
|
|
|
running = true;
|
|
|
|
const loadingBarRef = ref.current;
|
|
|
|
loadingBarRef.continuousStart(0, 300);
|
|
|
|
return () => {
|
|
loadingBarRef.complete();
|
|
running = false;
|
|
};
|
|
}, [ref]);
|
|
|
|
return (
|
|
<LoadingBar
|
|
className={'bg-primary'}
|
|
height={4}
|
|
waitingTime={0}
|
|
shadow
|
|
color={''}
|
|
ref={ref}
|
|
/>
|
|
);
|
|
}
|