Standardization

src/pages/settings/components/Theming/Themes/Themes.tsx

@@ -3,6 +3,7 @@ import {
 	Button,
 	Divider,
 	Group,
+	LoadingOverlay,
 	Overlay,
 	Stack,
 	Switch,
@@ -24,11 +25,19 @@ import { ThemeModal } from './ThemeModal';
 
 export function Themes() {
 	const backgroundsEndpoint = 'api/backgrounds';
-	const { data: allThemeData, isFetched: isAllThemeDataFetched } = useQueryAPI({
+	const {
+		data: allThemeData,
+		isFetched: allThemeDataIsFetched,
+		isFetching: allThemeDataIsFetching,
+	} = useQueryAPI({
 		endpoint: 'api/themes',
 	});
 	const [allThemes, setAllThemes] = useState<Theme[]>([]);
-	const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
+	const {
+		data: backgroundData,
+		isFetched: backgroundDataIsFetched,
+		isFetching: backgroundDataIsFetching,
+	} = useQueryAPI({
 		endpoint: backgroundsEndpoint,
 	});
 	const { data: themePlaylistData } = useQueryAPI({
@@ -76,13 +85,13 @@ export function Themes() {
 	};
 
 	useEffect(() => {
-		if (backgroundData && isBackgroundFetched) {
+		if (backgroundData && backgroundDataIsFetched) {
 			setBackgroundList([
 				'None',
 				...backgroundData.sort((a: string, b: string) => a.localeCompare(b)),
 			]);
 		}
-	}, [backgroundData, isBackgroundFetched]);
+	}, [backgroundData, backgroundDataIsFetched]);
 
 	useEffect(() => {
 		if (themePlaylistData) {
@@ -91,7 +100,7 @@ export function Themes() {
 	}, [themePlaylistData]);
 
 	useEffect(() => {
-		if (allThemeData && isAllThemeDataFetched) {
+		if (allThemeData && allThemeDataIsFetched) {
 			setAllThemes(
 				allThemeData.filter((a: Theme) =>
 					a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
@@ -101,7 +110,7 @@ export function Themes() {
 		if (debouncedSearch === searchValue) {
 			setIsLoading(false);
 		}
-	}, [allThemeData, isAllThemeDataFetched, debouncedSearch]);
+	}, [allThemeData, allThemeDataIsFetched, debouncedSearch]);
 
 	useEffect(() => {
 		if (allThemes) {
@@ -156,6 +165,16 @@ export function Themes() {
 				setIsLoading={setIsLoading}
 			/>
 			<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
+				<LoadingOverlay
+					visible={allThemeDataIsFetching || backgroundDataIsFetching}
+					zIndex={180}
+					overlayProps={{ blur: 5 }}
+					loaderProps={{
+						color: 'var(--mantine-color-primary-0)',
+						type: 'bars',
+						size: 'xl',
+					}}
+				/>
 				<Group
 					w={'85%'}
 					justify='center'
@@ -201,10 +220,10 @@ export function Themes() {
 										zIndex:
 											currentTheme === 'random' &&
 											(themePlaylists
-												.filter(
+												.find(
 													(t: ThemePlaylist) =>
 														t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
-												)[0]
+												)
 												?.themeList.includes(`${cardTheme.id}`) ||
 												cardTheme.name === theme.name)
 												? 195
@@ -222,10 +241,7 @@ export function Themes() {
 							</Group>
 						))
 					) : (
-						<Group
-							w={'100%'}
-							style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
-						>
+						<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
 							<NoItemsFound />
 						</Group>
 					)}