From 5c080f4fc59bffef3aa20d8f8e8460610a249408 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Mon, 31 Oct 2022 02:05:51 -0400
Subject: [PATCH] Add react loading component

---
 src/components/ConnectionRequired.tsx | 13 ++-----------
 src/components/loading/Loading.tsx    | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 11 deletions(-)
 create mode 100644 src/components/loading/Loading.tsx

diff --git a/src/components/ConnectionRequired.tsx b/src/components/ConnectionRequired.tsx
index b9e83ddb0c..62e5f66113 100644
--- a/src/components/ConnectionRequired.tsx
+++ b/src/components/ConnectionRequired.tsx
@@ -3,7 +3,7 @@ import { Outlet, useNavigate } from 'react-router-dom';
 
 import alert from './alert';
 import { appRouter } from './appRouter';
-import loading from './loading/loading';
+import Loading from './loading/Loading';
 import ServerConnections from './ServerConnections';
 import globalize from '../scripts/globalize';
 
@@ -152,17 +152,8 @@ const ConnectionRequired: FunctionComponent<ConnectionRequiredProps> = ({
         validateConnection();
     }, [ isAdminRequired, isUserRequired, navigate ]);
 
-    // Show/hide the loading indicator
-    useEffect(() => {
-        if (isLoading) {
-            loading.show();
-        } else {
-            loading.hide();
-        }
-    }, [ isLoading ]);
-
     if (isLoading) {
-        return null;
+        return <Loading />;
     }
 
     return <Outlet />;
diff --git a/src/components/loading/Loading.tsx b/src/components/loading/Loading.tsx
new file mode 100644
index 0000000000..ef8cae21a2
--- /dev/null
+++ b/src/components/loading/Loading.tsx
@@ -0,0 +1,17 @@
+import React, { FunctionComponent, useEffect } from 'react';
+
+import loading from './loading';
+
+const Loading: FunctionComponent = () => {
+    useEffect(() => {
+        loading.show();
+
+        return () => {
+            loading.hide();
+        };
+    }, []);
+
+    return <></>;
+};
+
+export default Loading;