♻️ refactor(App): move loading screen to standalone component

src/App.tsx

@@ -3,6 +3,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 
 import ErrorPage from 'components/pages/ErrorPage/index.js'
 import RootLayout from 'components/templates/RouteTracker/index.js'
+import Loading from 'components/molecules/LoadingScreen/index.js'
 
 const MainPage = React.lazy(() => import('components/pages/MainPage/index.js'))
 const ProjectsPage = React.lazy(() => import('components/pages/ProjectsPage/index.js'))
@@ -10,12 +11,6 @@ const CurriculumPage = React.lazy(() => import('components/pages/CurriculumPage/
 const ContactPage = React.lazy(() => import('components/pages/ContactPage/index.js'))
 const PrivacyPage = React.lazy(() => import('components/pages/PrivacyPage/index.js'))
 
-const Loading = () => (
-  <Backdrop open={true} aria-label="loading-screen">
-    <CircularProgress />
-  </Backdrop>
-)
-
 const router = createBrowserRouter([
   {
     path: '/',

src/components/molecules/LoadingScreen/index.tsx

@@ -0,0 +1,9 @@
+import { Backdrop, CircularProgress } from '@mui/material'
+
+const Loading = () => (
+  <Backdrop open={true} aria-label="loading-screen">
+    <CircularProgress />
+  </Backdrop>
+)
+
+export default Loading