State management

src/pages/settings/components/Messages/Messages.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { textInputClasses } from 'styles';
 import type { Message } from 'types';
 import AddItemModal from '../Shared/AddItemModal';
+import NoItemsFound from '../Shared/NoItemsFound';
 import SettingsHeader from '../Shared/SettingsHeader';
 import DebouncedMessage from './DebouncedMessage';
 
@@ -23,6 +24,7 @@ const MessageSettings = () => {
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
+	const [isLoading, setIsLoading] = useState(false);
 
 	const handleClose = () => {
 		setNewMessage('');
@@ -38,6 +40,9 @@ const MessageSettings = () => {
 				),
 			);
 		}
+		if (debouncedSearch === searchValue) {
+			setIsLoading(false);
+		}
 	}, [messageData, isMessagesFetched, debouncedSearch]);
 
 	useEffect(() => {
@@ -67,6 +72,8 @@ const MessageSettings = () => {
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
 				searchPlaceholder={'Search Message content...'}
+				isLoading={isLoading}
+				setIsLoading={setIsLoading}
 			/>
 			<AddItemModal
 				modalOpened={modalOpened}
@@ -122,15 +129,25 @@ const MessageSettings = () => {
 				align='center'
 			>
 				<Grid w={'75%'}>
-					{messages?.map((message: Message) => (
-						<GridCol span={isMobile ? 12 : 6} key={message.id}>
-							<DebouncedMessage
-								label={`ID# ${message.id}`}
-								message={message}
-								setMessage={setMessage}
-							/>
+					{messages.length > 0 ? (
+						messages?.map((message: Message) => (
+							<GridCol span={isMobile ? 12 : 6} key={message.id}>
+								<DebouncedMessage
+									label={`ID# ${message.id}`}
+									message={message}
+									setMessage={setMessage}
+								/>
+							</GridCol>
+						))
+					) : (
+						<GridCol
+							w={'100%'}
+							span={12}
+							style={{ display: 'flex', justifyContent: 'center' }}
+						>
+							<NoItemsFound />
 						</GridCol>
-					))}
+					)}
 				</Grid>
 			</Stack>
 		</Stack>