2022-02-21 19:34:12 +01:00
|
|
|
import { FC, useEffect, useState } from 'react';
|
2022-03-12 06:23:57 +01:00
|
|
|
import { NotificationUtilities } from '../../api';
|
2022-02-21 19:34:12 +01:00
|
|
|
import { Base, Column } from '../../common';
|
|
|
|
|
|
|
|
interface LoadingViewProps
|
|
|
|
{
|
|
|
|
isError: boolean;
|
|
|
|
message: string;
|
2022-03-15 10:11:11 +01:00
|
|
|
percent: number;
|
2022-02-21 19:34:12 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
export const LoadingView: FC<LoadingViewProps> = props =>
|
|
|
|
{
|
2022-03-15 10:11:11 +01:00
|
|
|
const { isError = false, message = '', percent = 0 } = props;
|
2022-02-21 19:34:12 +01:00
|
|
|
const [ loadingShowing, setLoadingShowing ] = useState(false);
|
|
|
|
|
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
if(!isError) return;
|
|
|
|
|
|
|
|
NotificationUtilities.simpleAlert(message, null, null, null, 'Connection Error');
|
|
|
|
}, [ isError, message ]);
|
|
|
|
|
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
const timeout = setTimeout(() => setLoadingShowing(true), 500);
|
|
|
|
|
|
|
|
return () => clearTimeout(timeout);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return (
|
2022-03-15 10:11:11 +01:00
|
|
|
<Column position="relative" className="nitro-loading h-100">
|
|
|
|
<div className="container h-100">
|
|
|
|
<div className="row h-100 justify-content-center">
|
|
|
|
<Base className="connecting-duck" />
|
|
|
|
<div className="col-6 align-self-end text-center py-4">
|
|
|
|
{ isError && (message && message.length) ?
|
|
|
|
<Base className="fs-4 text-shadow">{message}</Base>
|
|
|
|
:
|
|
|
|
<>
|
|
|
|
<Base className="fs-4 text-shadow">{percent.toFixed()}%</Base>
|
|
|
|
<div className="nitro-loading-bar mt-4">
|
|
|
|
<div className="nitro-loading-bar-inner" style={{ 'width': `${ percent }%` }}/>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2022-02-21 19:34:12 +01:00
|
|
|
</Column>
|
|
|
|
);
|
|
|
|
}
|