From f7d2d985b094377650836f6728d31fbd492ecc89 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 15 Mar 2022 05:07:47 -0400
Subject: [PATCH 1/3] Move hc center

---
 src/{views => components}/hc-center/HcCenterView.scss         | 0
 src/{views => components}/hc-center/HcCenterView.tsx          | 4 ++--
 .../util => components/hc-center/common}/BadgeResolver.ts     | 0
 .../util => components/hc-center/common}/ClubStatus.ts        | 0
 src/components/index.scss                                     | 1 +
 src/components/main/MainView.tsx                              | 2 +-
 src/views/Styles.scss                                         | 1 -
 7 files changed, 4 insertions(+), 4 deletions(-)
 rename src/{views => components}/hc-center/HcCenterView.scss (100%)
 rename src/{views => components}/hc-center/HcCenterView.tsx (99%)
 rename src/{views/hc-center/util => components/hc-center/common}/BadgeResolver.ts (100%)
 rename src/{views/hc-center/util => components/hc-center/common}/ClubStatus.ts (100%)

diff --git a/src/views/hc-center/HcCenterView.scss b/src/components/hc-center/HcCenterView.scss
similarity index 100%
rename from src/views/hc-center/HcCenterView.scss
rename to src/components/hc-center/HcCenterView.scss
diff --git a/src/views/hc-center/HcCenterView.tsx b/src/components/hc-center/HcCenterView.tsx
similarity index 99%
rename from src/views/hc-center/HcCenterView.tsx
rename to src/components/hc-center/HcCenterView.tsx
index e3babadb..5236443c 100644
--- a/src/views/hc-center/HcCenterView.tsx
+++ b/src/components/hc-center/HcCenterView.tsx
@@ -5,8 +5,8 @@ import { AddEventLinkTracker, CreateLinkEvent, GetConfiguration, LocalizeText, R
 import { Base, Button, Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { HcCenterEvent } from '../../events';
 import { UseMessageEventHook, UseUiEvent } from '../../hooks';
-import { BadgeResolver } from './util/BadgeResolver';
-import { ClubStatus } from './util/ClubStatus';
+import { BadgeResolver } from './common/BadgeResolver';
+import { ClubStatus } from './common/ClubStatus';
 
 
 export const HcCenterView: FC<{}> = props =>
diff --git a/src/views/hc-center/util/BadgeResolver.ts b/src/components/hc-center/common/BadgeResolver.ts
similarity index 100%
rename from src/views/hc-center/util/BadgeResolver.ts
rename to src/components/hc-center/common/BadgeResolver.ts
diff --git a/src/views/hc-center/util/ClubStatus.ts b/src/components/hc-center/common/ClubStatus.ts
similarity index 100%
rename from src/views/hc-center/util/ClubStatus.ts
rename to src/components/hc-center/common/ClubStatus.ts
diff --git a/src/components/index.scss b/src/components/index.scss
index 71c7727a..c00839bd 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -8,6 +8,7 @@
 @import './friends/FriendsView';
 @import './groups/GroupView';
 @import './guide-tool/GuideToolView';
+@import './hc-center/HcCenterView';
 @import './help/HelpView';
 @import './inventory/InventoryView';
 @import './loading/LoadingView';
diff --git a/src/components/main/MainView.tsx b/src/components/main/MainView.tsx
index 250cf763..45d382e3 100644
--- a/src/components/main/MainView.tsx
+++ b/src/components/main/MainView.tsx
@@ -3,7 +3,6 @@ import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetCommunication, RemoveLinkEventTracker } from '../../api';
 import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { UseRoomSessionManagerEvent } from '../../hooks';
-import { HcCenterView } from '../../views/hc-center/HcCenterView';
 import { HotelView } from '../../views/hotel-view/HotelView';
 import { AchievementsView } from '../achievements/AchievementsView';
 import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
@@ -15,6 +14,7 @@ import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
 import { FriendsView } from '../friends/FriendsView';
 import { GroupsView } from '../groups/GroupsView';
 import { GuideToolView } from '../guide-tool/GuideToolView';
+import { HcCenterView } from '../hc-center/HcCenterView';
 import { HelpView } from '../help/HelpView';
 import { InventoryView } from '../inventory/InventoryView';
 import { ModToolsView } from '../mod-tools/ModToolsView';
diff --git a/src/views/Styles.scss b/src/views/Styles.scss
index 2c62c8e7..0f26fa35 100644
--- a/src/views/Styles.scss
+++ b/src/views/Styles.scss
@@ -1,2 +1 @@
 @import "./hotel-view/HotelView";
-@import "./hc-center/HcCenterView.scss";

From e01b08830e623b1c5e2566b3bd1521fc8c5b2818 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 15 Mar 2022 05:08:41 -0400
Subject: [PATCH 2/3] Move hotel-view

---
 src/App.scss                                                    | 1 -
 src/{views => components}/hotel-view/HotelView.scss             | 0
 src/{views => components}/hotel-view/HotelView.tsx              | 0
 .../hotel-view/views/widget-slot/WidgetSlotView.tsx             | 0
 .../hotel-view/views/widget-slot/WidgetSlotView.types.ts        | 0
 .../hotel-view/views/widgets/GetWidgetLayout.tsx                | 0
 .../hotel-view/views/widgets/GetWidgetLayout.types.ts           | 0
 .../hotel-view/views/widgets/HotelViewWidgets.scss              | 0
 .../views/widgets/bonus-rare/BonusRareWidgetView.scss           | 0
 .../hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx | 0
 .../views/widgets/bonus-rare/BonusRareWidgetView.types.ts       | 0
 .../views/widgets/hall-of-fame-item/HallOfFameItemView.tsx      | 0
 .../views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts | 0
 .../views/widgets/hall-of-fame/HallOfFameWidgetView.scss        | 0
 .../views/widgets/hall-of-fame/HallOfFameWidgetView.tsx         | 0
 .../views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts    | 0
 .../views/widgets/promo-article/PromoArticleWidgetView.scss     | 0
 .../views/widgets/promo-article/PromoArticleWidgetView.tsx      | 0
 .../views/widgets/promo-article/PromoArticleWidgetView.types.ts | 0
 .../views/widgets/widget-container/WidgetContainerView.scss     | 0
 .../views/widgets/widget-container/WidgetContainerView.tsx      | 0
 .../views/widgets/widget-container/WidgetContainerView.types.ts | 0
 src/components/index.scss                                       | 1 +
 src/components/main/MainView.tsx                                | 2 +-
 src/views/Styles.scss                                           | 1 -
 25 files changed, 2 insertions(+), 3 deletions(-)
 rename src/{views => components}/hotel-view/HotelView.scss (100%)
 rename src/{views => components}/hotel-view/HotelView.tsx (100%)
 rename src/{views => components}/hotel-view/views/widget-slot/WidgetSlotView.tsx (100%)
 rename src/{views => components}/hotel-view/views/widget-slot/WidgetSlotView.types.ts (100%)
 rename src/{views => components}/hotel-view/views/widgets/GetWidgetLayout.tsx (100%)
 rename src/{views => components}/hotel-view/views/widgets/GetWidgetLayout.types.ts (100%)
 rename src/{views => components}/hotel-view/views/widgets/HotelViewWidgets.scss (100%)
 rename src/{views => components}/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss (100%)
 rename src/{views => components}/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx (100%)
 rename src/{views => components}/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts (100%)
 rename src/{views => components}/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx (100%)
 rename src/{views => components}/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts (100%)
 rename src/{views => components}/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss (100%)
 rename src/{views => components}/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx (100%)
 rename src/{views => components}/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts (100%)
 rename src/{views => components}/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss (100%)
 rename src/{views => components}/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx (100%)
 rename src/{views => components}/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts (100%)
 rename src/{views => components}/hotel-view/views/widgets/widget-container/WidgetContainerView.scss (100%)
 rename src/{views => components}/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx (100%)
 rename src/{views => components}/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts (100%)
 delete mode 100644 src/views/Styles.scss

diff --git a/src/App.scss b/src/App.scss
index e888fa9e..a8a41ed8 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -96,4 +96,3 @@ $nitro-calendar-height: 400px;
 
 @import './common';
 @import './components';
-@import "./views/Styles";
diff --git a/src/views/hotel-view/HotelView.scss b/src/components/hotel-view/HotelView.scss
similarity index 100%
rename from src/views/hotel-view/HotelView.scss
rename to src/components/hotel-view/HotelView.scss
diff --git a/src/views/hotel-view/HotelView.tsx b/src/components/hotel-view/HotelView.tsx
similarity index 100%
rename from src/views/hotel-view/HotelView.tsx
rename to src/components/hotel-view/HotelView.tsx
diff --git a/src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx b/src/components/hotel-view/views/widget-slot/WidgetSlotView.tsx
similarity index 100%
rename from src/views/hotel-view/views/widget-slot/WidgetSlotView.tsx
rename to src/components/hotel-view/views/widget-slot/WidgetSlotView.tsx
diff --git a/src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts b/src/components/hotel-view/views/widget-slot/WidgetSlotView.types.ts
similarity index 100%
rename from src/views/hotel-view/views/widget-slot/WidgetSlotView.types.ts
rename to src/components/hotel-view/views/widget-slot/WidgetSlotView.types.ts
diff --git a/src/views/hotel-view/views/widgets/GetWidgetLayout.tsx b/src/components/hotel-view/views/widgets/GetWidgetLayout.tsx
similarity index 100%
rename from src/views/hotel-view/views/widgets/GetWidgetLayout.tsx
rename to src/components/hotel-view/views/widgets/GetWidgetLayout.tsx
diff --git a/src/views/hotel-view/views/widgets/GetWidgetLayout.types.ts b/src/components/hotel-view/views/widgets/GetWidgetLayout.types.ts
similarity index 100%
rename from src/views/hotel-view/views/widgets/GetWidgetLayout.types.ts
rename to src/components/hotel-view/views/widgets/GetWidgetLayout.types.ts
diff --git a/src/views/hotel-view/views/widgets/HotelViewWidgets.scss b/src/components/hotel-view/views/widgets/HotelViewWidgets.scss
similarity index 100%
rename from src/views/hotel-view/views/widgets/HotelViewWidgets.scss
rename to src/components/hotel-view/views/widgets/HotelViewWidgets.scss
diff --git a/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss b/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss
similarity index 100%
rename from src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss
rename to src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.scss
diff --git a/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx b/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx
similarity index 100%
rename from src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx
rename to src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx
diff --git a/src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts b/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts
similarity index 100%
rename from src/views/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts
rename to src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.types.ts
diff --git a/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx b/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
similarity index 100%
rename from src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
rename to src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
diff --git a/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts b/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts
similarity index 100%
rename from src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts
rename to src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.types.ts
diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss b/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
similarity index 100%
rename from src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
rename to src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx b/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
similarity index 100%
rename from src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
rename to src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts b/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts
similarity index 100%
rename from src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts
rename to src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.types.ts
diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss b/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss
similarity index 100%
rename from src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss
rename to src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.scss
diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx b/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
similarity index 100%
rename from src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
rename to src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts b/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts
similarity index 100%
rename from src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts
rename to src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.types.ts
diff --git a/src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.scss b/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.scss
similarity index 100%
rename from src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.scss
rename to src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.scss
diff --git a/src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx b/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx
similarity index 100%
rename from src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx
rename to src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx
diff --git a/src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts b/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts
similarity index 100%
rename from src/views/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts
rename to src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.types.ts
diff --git a/src/components/index.scss b/src/components/index.scss
index c00839bd..5cea1b3b 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -10,6 +10,7 @@
 @import './guide-tool/GuideToolView';
 @import './hc-center/HcCenterView';
 @import './help/HelpView';
+@import './hotel-view/HotelView';
 @import './inventory/InventoryView';
 @import './loading/LoadingView';
 @import './mod-tools/ModToolsView';
diff --git a/src/components/main/MainView.tsx b/src/components/main/MainView.tsx
index 45d382e3..d87f677d 100644
--- a/src/components/main/MainView.tsx
+++ b/src/components/main/MainView.tsx
@@ -3,7 +3,6 @@ import { FC, useCallback, useEffect, useState } from 'react';
 import { AddEventLinkTracker, GetCommunication, RemoveLinkEventTracker } from '../../api';
 import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { UseRoomSessionManagerEvent } from '../../hooks';
-import { HotelView } from '../../views/hotel-view/HotelView';
 import { AchievementsView } from '../achievements/AchievementsView';
 import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
 import { CameraWidgetView } from '../camera/CameraWidgetView';
@@ -16,6 +15,7 @@ import { GroupsView } from '../groups/GroupsView';
 import { GuideToolView } from '../guide-tool/GuideToolView';
 import { HcCenterView } from '../hc-center/HcCenterView';
 import { HelpView } from '../help/HelpView';
+import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
 import { ModToolsView } from '../mod-tools/ModToolsView';
 import { NavigatorView } from '../navigator/NavigatorView';
diff --git a/src/views/Styles.scss b/src/views/Styles.scss
deleted file mode 100644
index 0f26fa35..00000000
--- a/src/views/Styles.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "./hotel-view/HotelView";

From 4877e1b8a57729a9bc27541e53d586774af61e98 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 15 Mar 2022 05:59:51 -0400
Subject: [PATCH 3/3] Update loading

---
 src/App.tsx                             | 27 ++++++---------------
 src/components/loading/LoadingView.scss | 16 ++++---------
 src/components/loading/LoadingView.tsx  | 31 +++++++++----------------
 3 files changed, 23 insertions(+), 51 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9d3fd026..a947827a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,10 @@
-import { AvatarRenderEvent, ConfigurationEvent, HabboWebTools, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, NitroVersion, RoomEngineEvent, WebGL } from '@nitrots/nitro-renderer';
+import { ConfigurationEvent, HabboWebTools, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, NitroVersion, RoomEngineEvent, WebGL } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { GetAvatarRenderManager, GetCommunication, GetConfiguration, GetNitroInstance } from './api';
+import { GetCommunication, GetConfiguration, GetNitroInstance } from './api';
 import { Base, TransitionAnimation, TransitionAnimationTypes } from './common';
 import { LoadingView } from './components/loading/LoadingView';
 import { MainView } from './components/main/MainView';
-import { DispatchUiEvent, UseAvatarEvent, UseConfigurationEvent, UseLocalizationEvent, UseMainEvent, UseRoomEngineEvent } from './hooks';
+import { DispatchUiEvent, UseConfigurationEvent, UseLocalizationEvent, UseMainEvent, UseRoomEngineEvent } from './hooks';
 
 export const App: FC<{}> = props =>
 {
@@ -35,10 +35,7 @@ export const App: FC<{}> = props =>
         return urls;
     }, []);
 
-    const loadPercent = useCallback(() =>
-    {
-        setPercent(percent + 16.66);
-    }, [setPercent,percent]);
+    const loadPercent = useCallback(() => setPercent(prevValue => (prevValue + 16.66)), []);
 
     const handler = useCallback((event: NitroEvent) =>
     {
@@ -70,10 +67,9 @@ export const App: FC<{}> = props =>
                 setMessage('Handshake Failed');
 				return;
 			case NitroCommunicationDemoEvent.CONNECTION_AUTHENTICATED:
-                setMessage('Finishing Up');
                 loadPercent();
 
-                GetAvatarRenderManager().init();
+                GetNitroInstance().init();
 
                 if(LegacyExternalInterface.available) LegacyExternalInterface.call('legacyTrack', 'authentication', 'authok', []);
 				return;
@@ -89,24 +85,16 @@ export const App: FC<{}> = props =>
 
                 HabboWebTools.send(-1, 'client.init.handshake.fail');
                 return;
-            case AvatarRenderEvent.AVATAR_RENDER_READY:
-                GetNitroInstance().init();
-                loadPercent();
-                return;
             case RoomEngineEvent.ENGINE_INITIALIZED:
                 loadPercent();
-                setTimeout(() =>
-                { 
-                    setIsReady(true);
-                }, 200)
+
+                setTimeout(() => setIsReady(true), 200);
                 return;
             case NitroLocalizationEvent.LOADED:
                 GetNitroInstance().core.asset.downloadAssets(getPreloadAssetUrls(), (status: boolean) =>
                 {
                     if(status)
                     {
-                        setMessage('Connecting');
-                        
                         GetCommunication().init();
 
                         loadPercent();
@@ -132,7 +120,6 @@ export const App: FC<{}> = props =>
     UseLocalizationEvent(NitroLocalizationEvent.LOADED, handler);
     UseConfigurationEvent(ConfigurationEvent.LOADED, handler);
     UseConfigurationEvent(ConfigurationEvent.FAILED, handler);
-    UseAvatarEvent(AvatarRenderEvent.AVATAR_RENDER_READY, handler);
 
     if(!WebGL.isWebGLAvailable())
     {
diff --git a/src/components/loading/LoadingView.scss b/src/components/loading/LoadingView.scss
index 27b5a4b6..bd63beae 100644
--- a/src/components/loading/LoadingView.scss
+++ b/src/components/loading/LoadingView.scss
@@ -54,17 +54,11 @@
         }
     }
 
-    .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;
+    .nitro-logo {
+        width: 47px;
+        height: 65px;
+        background: transparent url('https://assets.nitrodev.co/logos/react-loader.png') no-repeat center;
+        z-index: 1;
     }
 
     .nitro-loading-bar {
diff --git a/src/components/loading/LoadingView.tsx b/src/components/loading/LoadingView.tsx
index 2f4a815e..bd6faef2 100644
--- a/src/components/loading/LoadingView.tsx
+++ b/src/components/loading/LoadingView.tsx
@@ -1,6 +1,6 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect } from 'react';
 import { NotificationUtilities } from '../../api';
-import { Base, Column } from '../../common';
+import { Base, Column, Text } from '../../common';
 
 interface LoadingViewProps
 {
@@ -12,7 +12,6 @@ interface LoadingViewProps
 export const LoadingView: FC<LoadingViewProps> = props =>
 {
     const { isError = false, message = '', percent = 0 } = props;
-    const [ loadingShowing, setLoadingShowing ] = useState(false);
 
     useEffect(() =>
     {
@@ -20,35 +19,27 @@ export const LoadingView: FC<LoadingViewProps> = props =>
 
         NotificationUtilities.simpleAlert(message, null, null, null, 'Connection Error');
     }, [ isError, message ]);
-
-    useEffect(() =>
-    {
-        const timeout = setTimeout(() => setLoadingShowing(true), 500);
-
-        return () => clearTimeout(timeout);
-    }, []);
     
     return (
-        <Column position="relative" className="nitro-loading h-100">
-            <div className="container h-100">
-                <div className="row h-100 justify-content-center">
+        <Column fullHeight position="relative" className="nitro-loading">
+            <Base fullHeight className="container h-100">
+                <Column fullHeight alignItems="center" justifyContent="end">
                     <Base className="connecting-duck" />
-                    <div className="col-6 align-self-end text-center py-4">
+                    <Column size={ 6 } className="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">
+                                <Text fontSize={ 4 } variant="white" className="text-shadow">{ percent.toFixed() }%</Text>
+                                <div className="nitro-loading-bar mt-2">
                                     <div className="nitro-loading-bar-inner" style={{ 'width': `${ percent }%` }}/>
                                 </div>   
                             </>
                         }
                         
-                    </div>
-                </div>
-            </div>
-            
+                    </Column>
+                </Column>
+            </Base>
         </Column>
     );
 }