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>

src/components/Loading.tsx

@@ -0,0 +1,21 @@
+import { Center, Loader, Stack } from '@mantine/core';
+import { stackClasses } from 'styles';
+
+function Loading({ loaded }: any) {
+	return (
+		<Stack
+			align='center'
+			justify='center'
+			pos={'fixed'}
+			className={stackClasses.fadeAway}
+			classNames={stackClasses}
+			data-loaded={loaded}
+		>
+			<Center>
+				<Loader color={'gray'} size='xl' />
+			</Center>
+		</Stack>
+	);
+}
+
+export default Loading;

src/contexts/theme.ts

@@ -1,5 +1,14 @@
 import { atom } from 'jotai';
 
-const appTheme = atom<any>({});
+const appTheme = atom<any>({
+	id: undefined,
+	name: 'default',
+	backgroundImage: 'none',
+	backgroundColor: '#EEEEEE',
+	searchColor: '#00000033',
+	primaryColor: '#222222',
+	accentColor: '#5c5c5c',
+	borderColor: '#5c5c5c',
+});
 
 export { appTheme };

src/pages/homepage/components/SettingsButton.tsx

@@ -92,7 +92,6 @@ function SettingsButton() {
 			setAllThemeData(allThemes);
 		}
 	}, [allThemes, isAllThemesFetched]);
-
 	return (
 		<>
 			{overlayOpened && <Overlay pos={'fixed'} />}
@@ -189,7 +188,7 @@ function SettingsButton() {
 											style={{
 												backgroundColor:
 													currentTheme === 'random'
-														? `${theme.searchColor === theme.primaryColor ? theme.searchColor.substring(0, 7) : theme.primaryColor.substring(0, 7)}88`
+														? `${theme?.searchColor === theme.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
 														: 'transparent',
 												color:
 													currentTheme === 'random'

src/styles/Stack.module.css

@@ -53,3 +53,17 @@
 	background-color: var(--color-search-background);
 	border-radius: 10px;
 }
+
+.fadeAway {
+	background-color: #121212;
+	transition: all .5s ease-in-out;
+	height: 100vh;
+	width: 100%;
+	opacity: 1;
+	display: flex;
+	backdrop-filter: blur(5px);
+	&[data-loaded="true"] {
+		opacity: 0;
+		z-index: -1;
+	}
+}