Standardization

src/pages/settings/components/Personalization/Personalization.tsx

@@ -1,4 +1,4 @@
-import { Card, Grid, GridCol, Overlay, Stack, TextInput } from '@mantine/core';
+import { Card, Grid, GridCol, LoadingOverlay, Stack, TextInput } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { SettingsHeader } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
@@ -10,8 +10,8 @@ const PersonalizationSettings = () => {
 	const endpoint = 'api/personalData';
 	const {
 		data: personalData,
-		isFetched: personalIsFetched,
-		isFetching: personalIsFetching,
+		isFetched: personalDataIsFetched,
+		isFetching: personalDataIsFetching,
 	} = useQueryAPI({
 		endpoint: endpoint,
 	});
@@ -22,10 +22,10 @@ const PersonalizationSettings = () => {
 	const { isMobile, theme } = useCommonHooks();
 
 	useEffect(() => {
-		if (personalData && personalIsFetched) {
+		if (personalData && personalDataIsFetched) {
 			setPersonal(personalData[0]);
 		}
-	}, [personalData, personalIsFetched]);
+	}, [personalData, personalDataIsFetched]);
 
 	useEffect(() => {
 		if (Object.keys(debounced).length) {
@@ -66,17 +66,18 @@ const PersonalizationSettings = () => {
 				isLoading={false}
 				setIsLoading={() => {}}
 			/>
-			<Stack align='center' mt={'6rem'}>
+			<Stack align='center' mt={'6rem'} pos={'relative'}>
+				<LoadingOverlay
+					visible={personalDataIsFetching}
+					zIndex={180}
+					overlayProps={{ blur: 5 }}
+					loaderProps={{
+						color: 'var(--mantine-color-primary-0)',
+						type: 'bars',
+						size: 'xl',
+					}}
+				/>
 				<Grid w={'75%'}>
-					{personalIsFetching && (
-						<Overlay
-							style={{
-								borderRadius: '10px',
-								margin: '-.5rem',
-								backdropFilter: 'blur(5px) brightness(1.2)',
-							}}
-						/>
-					)}
 					<GridCol span={isMobile ? 12 : 4}>
 						<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}>
 							<TextInput