Minor changes to styles and packages

src/App.tsx

@@ -5,6 +5,7 @@ import {
 	createTheme,
 	mergeMantineTheme,
 } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
 import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import {
@@ -16,10 +17,10 @@ import {
 } from 'react-router-dom';
 import { Loading, MainLayout } from './components';
 import '@mantine/core/styles.css';
+import '@mantine/notifications/styles.css';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import './index.css';
 import { Homepage, Settings } from 'pages';
-import { ToastContainer } from 'react-toastify';
 import type { Theme, ThemePlaylist } from 'types';
 
 function App() {
@@ -73,10 +74,8 @@ function App() {
 				if (themeName !== 'random') {
 					const temp = allThemes.find((t: Theme) => t.name === themeName);
 					setTheme(temp);
-					setLoaded(true);
 				} else {
 					handleThemeChange(allThemes, false);
-					setLoaded(true);
 				}
 			} else if (currentThemePlaylist === 'Time of Day') {
 				const themeList = JSON.parse(
@@ -89,7 +88,6 @@ 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)
@@ -97,9 +95,9 @@ function App() {
 				);
 				const filteredThemes = allThemes.filter((t: Theme) => themeList.includes(t.id));
 				setTheme('random');
-				setLoaded(true);
 				handleThemeChange(filteredThemes, false);
 			}
+			setLoaded(true);
 		}
 	}, [
 		isAllThemesFetched,
@@ -112,7 +110,7 @@ function App() {
 		<>
 			{theme && (
 				<MantineProvider theme={mantineTheme}>
-					<ToastContainer />
+					<Notifications />
 					<Loading loaded={loaded} />
 					<RouterProvider router={router} />
 					<ReactQueryDevtools initialIsOpen={false} />