36 lines
902 B
TypeScript
36 lines
902 B
TypeScript
import { useAtomValue } from 'jotai';
|
|
import type { ReactNode } from 'react';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
import { Loading } from '../../ui/loading';
|
|
import * as styles from './index.css';
|
|
import { globalLoadingEventsAtom } from './index.jotai';
|
|
|
|
export {
|
|
type GlobalLoadingEvent,
|
|
pushGlobalLoadingEventAtom,
|
|
resolveGlobalLoadingEventAtom,
|
|
} from './index.jotai';
|
|
|
|
export function GlobalLoading(): ReactNode {
|
|
const globalLoadingEvents = useAtomValue(globalLoadingEventsAtom);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (globalLoadingEvents.length) {
|
|
setLoading(true);
|
|
} else {
|
|
setLoading(false);
|
|
}
|
|
}, [globalLoadingEvents]);
|
|
|
|
if (!globalLoadingEvents.length) {
|
|
return null;
|
|
}
|
|
return (
|
|
<div className={styles.globalLoadingWrapperStyle} data-loading={loading}>
|
|
<Loading size={20} />
|
|
</div>
|
|
);
|
|
}
|