Style bug hotfix and Loader testing

src/App.tsx

@@ -5,7 +5,7 @@ import {
 	mergeMantineTheme,
 } from '@mantine/core';
 import { useCommonHooks, useQueryAPI } from 'hooks';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import {
 	Navigate,
 	Route,
@@ -17,6 +17,7 @@ import { MainLayout, ThemeProvider } from './components';
 import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import './index.css';
+import Loading from 'components/Loading';
 import { Homepage, Settings } from 'pages';
 import { ToastContainer } from 'react-toastify';
 import type { Theme, ThemePlaylist } from 'types';
@@ -30,6 +31,7 @@ function App() {
 	});
 	const { theme, setTheme, themeName, handleThemeChange, currentThemePlaylist } =
 		useCommonHooks();
+	const [loaded, setLoaded] = useState(false);
 	const overrides = createTheme({
 		white: theme?.backgroundColor,
 		fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
@@ -64,6 +66,7 @@ function App() {
 				if (themeName !== 'random') {
 					const temp = allThemes.find((t: Theme) => t.name === themeName);
 					setTheme(temp);
+					setLoaded(true);
 				} else {
 					handleThemeChange(allThemes, false);
 				}
@@ -78,6 +81,7 @@ function App() {
 							t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
 					),
 				);
+				setLoaded(true);
 			} else {
 				const themeList = JSON.parse(
 					themePlaylists.find((t: ThemePlaylist) => t.name === currentThemePlaylist)
@@ -85,6 +89,7 @@ function App() {
 				);
 				const filteredThemes = allThemes.filter((t: Theme) => themeList.includes(t.id));
 				setTheme('random');
+				setLoaded(true);
 				handleThemeChange(filteredThemes, false);
 			}
 		}
@@ -96,6 +101,7 @@ function App() {
 				<MantineProvider theme={mantineTheme}>
 					<ThemeProvider theme={theme}>
 						<ToastContainer />
+						<Loading loaded={loaded} />
 						<RouterProvider router={router} />
 						<ReactQueryDevtools initialIsOpen={false} />
 					</ThemeProvider>