State management

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

@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
 import { textInputClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
 import AddItemModal from '../Shared/AddItemModal';
+import NoItemsFound from '../Shared/NoItemsFound';
 import SettingsHeader from '../Shared/SettingsHeader';
 import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem';
 const BookmarkSettings = () => {
@@ -33,6 +34,7 @@ const BookmarkSettings = () => {
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
+	const [isLoading, setIsLoading] = useState(false);
 
 	const handleClose = () => {
 		setNewGroup(defaultGroup);
@@ -94,6 +96,9 @@ const BookmarkSettings = () => {
 			);
 			setGroups(groupList);
 		}
+		if (debouncedGroupSearch === searchValue) {
+			setIsLoading(false);
+		}
 	}, [groupData, groupsIsFetched, debouncedGroupSearch]);
 
 	useEffect(() => {
@@ -194,6 +199,8 @@ const BookmarkSettings = () => {
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
 				searchPlaceholder={'Search Bookmark Groups...'}
+				isLoading={isLoading}
+				setIsLoading={setIsLoading}
 			/>
 			{dragging ? (
 				<DragDropContext onDragEnd={onDragEnd}>
@@ -285,16 +292,22 @@ const BookmarkSettings = () => {
 					align='center'
 				>
 					<Group w={isMobile ? undefined : '75%'} align='start' justify='center'>
-						{groups?.map((group: BookmarkGroup) => (
-							<DebouncedGroupSettingsItem
-								key={group.id}
-								bookmarkGroup={group}
-								bookmarks={bookmarks
-									.filter((a: Bookmark) => a.category === group.categoryName)
-									.sort((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))}
-								searchTerm={searchValue}
-							/>
-						))}
+						{groups.length > 0 ? (
+							groups?.map((group: BookmarkGroup) => (
+								<DebouncedGroupSettingsItem
+									key={group.id}
+									bookmarkGroup={group}
+									bookmarks={bookmarks
+										.filter((a: Bookmark) => a.category === group.categoryName)
+										.sort((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))}
+									searchTerm={searchValue}
+								/>
+							))
+						) : (
+							<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
+								<NoItemsFound />
+							</Group>
+						)}
 					</Group>
 				</Stack>
 			)}