nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update loading screen

Browse Source
This commit is contained in:
Bill 2021-09-30 03:46:58 -04:00
parent bba0d96495
commit 78001b6f30
3 changed files with 139 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -128,7 +128,7 @@ export const App: FC<{}> = props =>
<div className="nitro-app overflow-hidden"> <div className="nitro-app overflow-hidden">
<div id="nitro-alerts-container" /> <div id="nitro-alerts-container" />
{ (!isReady || isError) && <LoadingView isError={ isError } message={ message } /> } { (!isReady || isError) && <LoadingView isError={ isError } message={ message } /> }
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady && !isError) } timeout={ 300 }> <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady && !isError) }>
<MainView /> <MainView />
</TransitionAnimation> </TransitionAnimation>
</div> </div>

174
src/views/loading/LoadingView.scss
View File

@ -1,75 +1,113 @@
.nitro-loading { .nitro-loading {
width: 100%; position: relative;
height: 100%; background: linear-gradient(to bottom, $white, 15%, $primary);
.connecting-duck {
position: absolute; position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0;
left: 0;
background: url('../../assets/images/loading/connecting-duck-spritesheet.png') no-repeat top left;
width: 235px;
height: 127px;
animation: 1.5s connecting-duck infinite step-end;
transform: scale(0.5);
&.01 {
background-position: 0 0;
}
&.02 {
background-position: 0 -132px;
width: 280px;
height: 151px;
}
&.03 {
background-position: 0 -288px;
width: 326px;
height: 174px;
}
&.04 {
background-position: 0 -467px;
}
&.05 {
background-position: 0 -599px;
width: 280px;
height: 151px;
}
&.06 {
background-position: 0 -755px;
width: 326px;
height: 174px;
}
&.07 {
background-position: 0 -934px;
width: 190px;
height: 104px;
}
}
.logo { .logo {
background: url('../../assets/images/nitro/nitro-light.svg') no-repeat center;
width: 45%;
height: 45%;
}
.lds-ellipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
div {
position: absolute; position: absolute;
top: 33px; top: 0;
width: 13px; bottom: 0;
height: 13px; margin: auto;
border-radius: 50%; right: 0;
background: #fff; left: 0;
animation-timing-function: cubic-bezier(0, 1, 1, 0); width: 35%;
height: 35%;
@keyframes lds-ellipsis1 { background: url('../../assets/images/nitro/nitro-light.svg') no-repeat center;
0% { z-index: -1;
transform: scale(0); }
} }
100% {
transform: scale(1); @keyframes connecting-duck {
} 0% {
} background-position: 0 0;
width: 235px;
@keyframes lds-ellipsis3 { height: 127px;
0% { }
transform: scale(1);
} 15% {
100% { background-position: 0 -132px;
transform: scale(0); width: 280px;
} height: 151px;
} }
@keyframes lds-ellipsis2 { 30% {
0% { background-position: 0 -288px;
transform: translate(0, 0); width: 326px;
} height: 174px;
100% { }
transform: translate(24px, 0);
} 45% {
} background-position: 0 -467px;
width: 235px;
&:nth-child(1) { height: 127px;
left: 8px; }
animation: lds-ellipsis1 0.6s infinite;
} 60% {
background-position: 0 -599px;
&:nth-child(2) { width: 280px;
left: 8px; height: 151px;
animation: lds-ellipsis2 0.6s infinite; }
}
75% {
&:nth-child(3) { background-position: 0 -755px;
left: 32px; width: 326px;
animation: lds-ellipsis2 0.6s infinite; height: 174px;
} }
&:nth-child(4) { 90% {
left: 56px; background-position: 0 -934px;
animation: lds-ellipsis3 0.6s infinite; width: 190px;
} height: 104px;
}
} }
} }

43
src/views/loading/LoadingView.tsx
View File

@ -1,15 +1,46 @@
import { FC } from 'react'; import { FC, useEffect, useState } from 'react';
import { NitroLayoutFlexColumn } from '../../layout';
import { NitroLayoutBase } from '../../layout/base';
import { NotificationAlertType } from '../notification-center/common/NotificationAlertType';
import { NotificationUtilities } from '../notification-center/common/NotificationUtilities';
import { LoadingViewProps } from './LoadingView.types'; import { LoadingViewProps } from './LoadingView.types';
export const LoadingView: FC<LoadingViewProps> = props => export const LoadingView: FC<LoadingViewProps> = props =>
{ {
const { isError = false, message = '' } = props; const { isError = false, message = '' } = props;
const [ loadingShowing, setLoadingShowing ] = useState(false);
useEffect(() =>
{
if(!isError) return;
NotificationUtilities.simpleAlert(message, NotificationAlertType.DEFAULT, null, null, 'Connection Error');
}, [ isError, message ]);
useEffect(() =>
{
const timeout = setTimeout(() =>
{
setLoadingShowing(true);
}, 500);
return () =>
{
clearTimeout(timeout);
}
}, []);
return ( return (
<div className="nitro-loading d-flex flex-column justify-content-center align-items-center w-100 h-100"> <NitroLayoutFlexColumn className='position-relative nitro-loading justify-content-center align-items-center w-100 h-100'>
<div className="logo mb-4"></div> <NitroLayoutBase className="connecting-duck" />
{ message && message.length && (<div className="h4 m-0">{ message }</div>) } {/* <TransitionAnimation className="loading-area" type={ TransitionAnimationTypes.FADE_IN } inProp={ loadingShowing }>
{ !isError && (<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>) } <NitroLayoutBase className="connecting-duck" />
</div> </TransitionAnimation> */}
{/* <TransitionAnimation className="loading-area" type={ TransitionAnimationTypes.FADE_IN } inProp={ !loadingShowing } timeout={ 500 }>
<NitroLayoutBase position="absolute" className="logo" />
</TransitionAnimation> */}
{ isError && (message && message.length) &&
<NitroLayoutBase className="m-auto bottom-3 fs-4 text-shadow" position="absolute">{ message }</NitroLayoutBase> }
</NitroLayoutFlexColumn>
); );
} }