Standardization

src/pages/settings/components/Bookmarks/Bookmarks.tsx

@@ -1,5 +1,14 @@
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
-import { Box, Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
+import {
+	Box,
+	Button,
+	Card,
+	Group,
+	LoadingOverlay,
+	Stack,
+	Text,
+	TextInput,
+} from '@mantine/core';
 import { isNotEmpty, useForm } from '@mantine/form';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
@@ -24,7 +33,11 @@ const BookmarkSettings = () => {
 		},
 	});
 	const bookmarksEndpoint = 'api/bookmarks';
-	const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
+	const {
+		data: bookmarkData,
+		isFetched: bookmarkDataIsFetched,
+		isFetching: bookmarkDataIsFetching,
+	} = useQueryAPI({
 		endpoint: bookmarksEndpoint,
 	});
 	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
@@ -68,10 +81,10 @@ const BookmarkSettings = () => {
 	}
 
 	useEffect(() => {
-		if (bookmarkData && bookmarksIsFetched) {
+		if (bookmarkData && bookmarkDataIsFetched) {
 			setBookmarks(bookmarkData);
 		}
-	}, [bookmarksIsFetched, bookmarkData]);
+	}, [bookmarkDataIsFetched, bookmarkData]);
 
 	useEffect(() => {
 		if (groupData && groupsIsFetched) {
@@ -83,12 +96,11 @@ const BookmarkSettings = () => {
 								a.name.toLowerCase().includes(debouncedGroupSearch.toLowerCase()) ||
 								a.url.toLowerCase().includes(debouncedGroupSearch.toLowerCase()),
 						)
-						.map(
-							(a: Bookmark) =>
-								groupData.filter(
-									(b: BookmarkGroup) =>
-										b.categoryName.toLowerCase() === a.category.toLowerCase(),
-								)[0],
+						.map((a: Bookmark) =>
+							groupData.find(
+								(b: BookmarkGroup) =>
+									b.categoryName.toLowerCase() === a.category.toLowerCase(),
+							),
 						),
 				),
 			];
@@ -300,6 +312,16 @@ const BookmarkSettings = () => {
 					mb={isMobile ? '6rem' : '1rem'}
 					align='center'
 				>
+					<LoadingOverlay
+						visible={bookmarkDataIsFetching}
+						zIndex={180}
+						overlayProps={{ blur: 5 }}
+						loaderProps={{
+							color: 'var(--mantine-color-primary-0)',
+							type: 'bars',
+							size: 'xl',
+						}}
+					/>
 					<Group w={isMobile ? undefined : '80%'} align='start' justify='center'>
 						{groups.length > 0 ? (
 							groups?.map((group: BookmarkGroup) => (