From 78001b6f30d1aa679598aa917d74e3b117a7e993 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Thu, 30 Sep 2021 03:46:58 -0400
Subject: [PATCH] Update loading screen

---
 src/App.tsx                        |   2 +-
 src/views/loading/LoadingView.scss | 164 ++++++++++++++++++-----------
 src/views/loading/LoadingView.tsx  |  43 ++++++--
 3 files changed, 139 insertions(+), 70 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 643aedf4..b6106abb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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>
diff --git a/src/views/loading/LoadingView.scss b/src/views/loading/LoadingView.scss
index 0d9f5fb1..fb98e94a 100644
--- a/src/views/loading/LoadingView.scss
+++ b/src/views/loading/LoadingView.scss
@@ -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;
+    }
 }
diff --git a/src/views/loading/LoadingView.tsx b/src/views/loading/LoadingView.tsx
index 5dcf5ceb..dc211be6 100644
--- a/src/views/loading/LoadingView.tsx
+++ b/src/views/loading/LoadingView.tsx
@@ -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>
     );
 }