Update loading bar and spinner animations
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.
This commit is contained in:
@@ -16,13 +16,13 @@ export function GlobalLoader({
|
||||
return (
|
||||
<>
|
||||
<If condition={displayTopLoadingBar}>
|
||||
<TopLoadingBarIndicator completeOnUnmount={false} />
|
||||
<TopLoadingBarIndicator />
|
||||
</If>
|
||||
|
||||
<If condition={displaySpinner}>
|
||||
<div
|
||||
className={
|
||||
'zoom-in-80 flex flex-1 flex-col items-center justify-center py-48 animate-in fade-in'
|
||||
'flex flex-1 flex-col items-center justify-center py-48 animate-in fade-in zoom-in-50 slide-in-from-bottom-4'
|
||||
}
|
||||
>
|
||||
<LoadingOverlay displayLogo={displayLogo} fullPage={fullPage} />
|
||||
|
||||
@@ -1,35 +1,31 @@
|
||||
'use client';
|
||||
|
||||
import { createRef, useEffect, useRef } from 'react';
|
||||
import { createRef, useEffect } from 'react';
|
||||
|
||||
import type { LoadingBarRef } from 'react-top-loading-bar';
|
||||
import LoadingBar from 'react-top-loading-bar';
|
||||
|
||||
export function TopLoadingBarIndicator({
|
||||
completeOnUnmount = true,
|
||||
}: {
|
||||
completeOnUnmount?: boolean;
|
||||
}) {
|
||||
let running = false;
|
||||
|
||||
export function TopLoadingBarIndicator() {
|
||||
const ref = createRef<LoadingBarRef>();
|
||||
const runningRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current || runningRef.current) {
|
||||
if (!ref.current || running) {
|
||||
return;
|
||||
}
|
||||
|
||||
running = true;
|
||||
|
||||
const loadingBarRef = ref.current;
|
||||
|
||||
loadingBarRef.continuousStart(0, 250);
|
||||
runningRef.current = true;
|
||||
loadingBarRef.continuousStart(0, 300);
|
||||
|
||||
return () => {
|
||||
if (completeOnUnmount) {
|
||||
loadingBarRef.complete();
|
||||
}
|
||||
runningRef.current = false;
|
||||
loadingBarRef.complete();
|
||||
running = false;
|
||||
};
|
||||
}, [completeOnUnmount, ref]);
|
||||
}, [ref]);
|
||||
|
||||
return (
|
||||
<LoadingBar
|
||||
|
||||
Reference in New Issue
Block a user