nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +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 id="nitro-alerts-container" />
{ (!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 />
</TransitionAnimation>
</div>

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

@ -1,75 +1,113 @@
.nitro-loading {
width: 100%;
height: 100%;
position: absolute;
position: relative;
background: linear-gradient(to bottom, $white, 15%, $primary);
.logo {
background: url('../../assets/images/nitro/nitro-light.svg') no-repeat center;
width: 45%;
height: 45%;
}
.connecting-duck {
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);
.lds-ellipsis {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
&.01 {
background-position: 0 0;
}
div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
&.02 {
background-position: 0 -132px;
width: 280px;
height: 151px;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
&.03 {
background-position: 0 -288px;
width: 326px;
height: 174px;
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
&.04 {
background-position: 0 -467px;
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
&.05 {
background-position: 0 -599px;
width: 280px;
height: 151px;
}
&:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
&.06 {
background-position: 0 -755px;
width: 326px;
height: 174px;
}
&:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
&:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
&:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
&.07 {
background-position: 0 -934px;
width: 190px;
height: 104px;
}
}
.logo {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0;
left: 0;
width: 35%;
height: 35%;
background: url('../../assets/images/nitro/nitro-light.svg') no-repeat center;
z-index: -1;
}
}
@keyframes connecting-duck {
0% {
background-position: 0 0;
width: 235px;
height: 127px;
}
15% {
background-position: 0 -132px;
width: 280px;
height: 151px;
}
30% {
background-position: 0 -288px;
width: 326px;
height: 174px;
}
45% {
background-position: 0 -467px;
width: 235px;
height: 127px;
}
60% {
background-position: 0 -599px;
width: 280px;
height: 151px;
}
75% {
background-position: 0 -755px;
width: 326px;
height: 174px;
}
90% {
background-position: 0 -934px;
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';
export const LoadingView: FC<LoadingViewProps> = 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 (
<div className="nitro-loading d-flex flex-column justify-content-center align-items-center w-100 h-100">
<div className="logo mb-4"></div>
{ message && message.length && (<div className="h4 m-0">{ message }</div>) }
{ !isError && (<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>) }
</div>
<NitroLayoutFlexColumn className='position-relative nitro-loading justify-content-center align-items-center w-100 h-100'>
<NitroLayoutBase className="connecting-duck" />
{/* <TransitionAnimation className="loading-area" type={ TransitionAnimationTypes.FADE_IN } inProp={ loadingShowing }>
<NitroLayoutBase className="connecting-duck" />
</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>
);
}