various changes

src/components/AppLayout.jsx

@@ -1,22 +1,24 @@
-// Root.jsx
-import { toast } from 'react-toastify';
-import { Player } from './AudioPlayer.jsx';
+import React, { Suspense, lazy } from 'react';
 import Memes from './Memes.jsx';
+import { toast } from 'react-toastify';
 import { JoyUIRootIsland } from './Components.jsx';
 import { PrimeReactProvider } from "primereact/api";
 import { usePrimeReactThemeSwitcher } from '@/hooks/usePrimeReactThemeSwitcher.jsx';
 import CustomToastContainer from '../components/ToastProvider.jsx';
-import LyricSearch from './LyricSearch.jsx';
-import MediaRequestForm from './qs2/MediaRequestForm.jsx';
-import RequestManagement from './qs2/RequestManagement.jsx';
 import 'primereact/resources/themes/bootstrap4-light-blue/theme.css';
 import 'primereact/resources/primereact.min.css';
 
+const LoginPage = lazy(() => import('./Login.jsx'));
+const LyricSearch = lazy(() => import('./LyricSearch'));
+const MediaRequestForm = lazy(() => import('./TRip/MediaRequestForm.jsx'));
+const RequestManagement = lazy(() => import('./TRip/RequestManagement.jsx'));
+const Player = lazy(() => import('./AudioPlayer.jsx'));
+
+
 export default function Root({ child }) {
   window.toast = toast;
   const theme = document.documentElement.getAttribute("data-theme")
   usePrimeReactThemeSwitcher(theme);
-  // console.log(opts.children);
   return (
     <PrimeReactProvider>
       <CustomToastContainer
@@ -31,6 +33,7 @@ export default function Root({ child }) {
         color="danger">
           Work in progress... bugs are to be expected.
         </Alert> */}
+        {child == "LoginPage" && (<LoginPage />)}
         {child == "LyricSearch" && (<LyricSearch client:only="react" />)}
         {child == "Player" && (<Player client:only="react" />)}
         {child == "Memes" && <Memes client:only="react" />}