Fade in

src/App.tsx

@@ -69,6 +69,7 @@ function App() {
 					setLoaded(true);
 				} else {
 					handleThemeChange(allThemes, false);
+					setLoaded(true);
 				}
 			} else if (currentThemePlaylist === 'Time of Day') {
 				const themeList = JSON.parse(
@@ -93,8 +94,13 @@ function App() {
 				handleThemeChange(filteredThemes, false);
 			}
 		}
-	}, [isAllThemesFetched, themeName, currentThemePlaylist, isThemePlaylistsFetched]);
-
+	}, [
+		isAllThemesFetched,
+		themeName,
+		allThemes,
+		currentThemePlaylist,
+		isThemePlaylistsFetched,
+	]);
 	return (
 		<>
 			{theme && (

src/components/Loading.tsx

@@ -1,4 +1,4 @@
-import { Center, Loader, Stack } from '@mantine/core';
+import { Stack } from '@mantine/core';
 import { stackClasses } from 'styles';
 
 function Loading({ loaded }: any) {
@@ -10,11 +10,7 @@ function Loading({ loaded }: any) {
 			className={stackClasses.fadeAway}
 			classNames={stackClasses}
 			data-loaded={loaded}
-		>
-			<Center>
-				<Loader color={'gray'} size='xl' />
-			</Center>
-		</Stack>
+		/>
 	);
 }
 

src/components/MainLayout.tsx

@@ -1,23 +1,10 @@
 import { Box } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
 import { Outlet } from 'react-router-dom';
+import { boxClasses } from 'styles';
 
 export function MainLayout() {
-	const { theme } = useCommonHooks();
 	return (
-		<Box
-			style={{
-				width: '100%',
-				height: '100%',
-				position: 'fixed',
-				backgroundImage: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(/backgrounds/${theme.backgroundImage})`,
-				backgroundSize: 'cover',
-				backgroundRepeat: 'no-repeat',
-				backgroundPosition: 'center',
-				zIndex: -1,
-				overflow: 'scroll',
-			}}
-		>
+		<Box className={boxClasses.layoutContainer}>
 			<Outlet />
 		</Box>
 	);

src/components/ThemeProvider.tsx

@@ -12,6 +12,7 @@ export function ThemeProvider({
 				'--color-background': theme.backgroundColor,
 				'--color-border': theme.borderColor,
 				'--color-search-background': theme.searchColor,
+				'--image-background': `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(/backgrounds/${theme.backgroundImage})`,
 				'--toastify-color-light': `hwb(from ${theme.primaryColor} h w b / 0.25)`,
 				'--toastify-color-dark': `hwb(from ${theme.primaryColor} h w b / 0.25)`,
 				'--toastify-color-info': '#3498db',

src/styles/Box.module.css

@@ -1,3 +1,16 @@
+.layoutContainer {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+	background-image: var(--image-background);
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+	z-index: -1;
+	overflow: scroll;
+	transition: background-image .3s ease;
+}
+
 .appItemBox {
 	display: flex;
 	flex-direction: row;

src/styles/Stack.module.css

@@ -61,9 +61,11 @@
 	width: 100%;
 	opacity: 1;
 	display: flex;
+	z-index: 100;
 	backdrop-filter: blur(5px);
 	&[data-loaded="true"] {
 		opacity: 0;
+		background-color: var(--color-background);
 		z-index: -1;
 	}
 }