From 829f476ce3ac9a431f36d1d28560b74f4d10cb84 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Wed, 26 Apr 2023 09:50:48 -0400
Subject: [PATCH] Refactor backdrop and header to separate components

---
 src/App.tsx                  | 23 +++++------------------
 src/components/AppHeader.tsx | 20 ++++++++++++++++++++
 src/components/Backdrop.tsx  | 17 +++++++++++++++++
 3 files changed, 42 insertions(+), 18 deletions(-)
 create mode 100644 src/components/AppHeader.tsx
 create mode 100644 src/components/Backdrop.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1a544723a1..d72fd3831e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,8 @@
 import { History } from '@remix-run/router';
-import React, { useEffect } from 'react';
+import React from 'react';
 
+import AppHeader from './components/AppHeader';
+import Backdrop from './components/Backdrop';
 import { HistoryRouter } from './components/HistoryRouter';
 import { ApiProvider } from './hooks/useApi';
 import { AppRoutes, ExperimentalAppRoutes } from './routes';
@@ -8,31 +10,16 @@ import { AppRoutes, ExperimentalAppRoutes } from './routes';
 const App = ({ history }: { history: History }) => {
     const layoutMode = localStorage.getItem('layout');
 
-    useEffect(() => {
-        Promise.all([
-            // Initialize the UI components after first render
-            import('./scripts/libraryMenu'),
-            import('./scripts/autoBackdrops')
-        ]);
-    }, []);
-
     return (
         <ApiProvider>
             <HistoryRouter history={history}>
-                <div className='backdropContainer' />
-                <div className='backgroundContainer' />
-
-                <div className='mainDrawer hide'>
-                    <div className='mainDrawer-scrollContainer scrollContainer focuscontainer-y' />
-                </div>
-                <div className='skinHeader focuscontainer-x' />
+                <Backdrop />
+                <AppHeader />
 
                 <div className='mainAnimatedPages skinBody' />
                 <div className='skinBody'>
                     {layoutMode === 'experimental' ? <ExperimentalAppRoutes /> : <AppRoutes /> }
                 </div>
-
-                <div className='mainDrawerHandle' />
             </HistoryRouter>
         </ApiProvider>
     );
diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx
new file mode 100644
index 0000000000..941d36a940
--- /dev/null
+++ b/src/components/AppHeader.tsx
@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react';
+
+const AppHeader = () => {
+    useEffect(() => {
+        // Initialize the UI components after first render
+        import('../scripts/libraryMenu');
+    }, []);
+
+    return (
+        <>
+            <div className='mainDrawer hide'>
+                <div className='mainDrawer-scrollContainer scrollContainer focuscontainer-y' />
+            </div>
+            <div className='skinHeader focuscontainer-x' />
+            <div className='mainDrawerHandle' />
+        </>
+    );
+};
+
+export default AppHeader;
diff --git a/src/components/Backdrop.tsx b/src/components/Backdrop.tsx
new file mode 100644
index 0000000000..1283be0aa9
--- /dev/null
+++ b/src/components/Backdrop.tsx
@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+
+const Backdrop = () => {
+    useEffect(() => {
+        // Initialize the UI components after first render
+        import('../scripts/autoBackdrops');
+    }, []);
+
+    return (
+        <>
+            <div className='backdropContainer' />
+            <div className='backgroundContainer' />
+        </>
+    );
+};
+
+export default Backdrop;