Standardization

src/pages/settings/components/Applications/Applications.tsx

@@ -7,6 +7,7 @@ import {
 	Grid,
 	GridCol,
 	Group,
+	LoadingOverlay,
 	Popover,
 	Select,
 	Stack,
@@ -48,7 +49,11 @@ const ApplicationSettings = () => {
 	});
 	const appsEndpoint = 'api/applications';
 	const appsOrderEndpoint = 'api/applicationOrder';
-	const { data: applicationData, isFetching: isAppsFetching } = useQueryAPI({
+	const {
+		data: applicationData,
+		isFetched: applicationDataIsFetched,
+		isFetching: applicationDataIsFetching,
+	} = useQueryAPI({
 		endpoint: appsEndpoint,
 	});
 	const [applications, setApplications] = useState<Application[]>([]);
@@ -88,7 +93,7 @@ const ApplicationSettings = () => {
 		form.reset();
 	};
 	useEffect(() => {
-		if (applicationData && !isAppsFetching) {
+		if (applicationData && applicationDataIsFetched) {
 			setApplications(
 				applicationData
 					.filter(
@@ -103,7 +108,7 @@ const ApplicationSettings = () => {
 		if (debouncedSearch === searchValue) {
 			setIsLoading(false);
 		}
-	}, [applicationData, isAppsFetching, debouncedSearch]);
+	}, [applicationData, applicationDataIsFetched, debouncedSearch]);
 
 	useEffect(() => {
 		if (applicationList.length > 0 && applicationList !== applications) {
@@ -305,6 +310,16 @@ const ApplicationSettings = () => {
 					mb={isMobile ? '6rem' : '1rem'}
 					align='center'
 				>
+					<LoadingOverlay
+						visible={applicationDataIsFetching}
+						zIndex={180}
+						overlayProps={{ blur: 5 }}
+						loaderProps={{
+							color: 'var(--mantine-color-primary-0)',
+							type: 'bars',
+							size: 'xl',
+						}}
+					/>
 					{applications.length > 0 ? (
 						<Droppable droppableId={'groupList'}>
 							{(provided) => (