add is loading + not found

src/shared/components/Search.tsx

@@ -7,20 +7,21 @@ import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import { useOutsideClick } from '../../hooks/useOutSideClick'
 import { clx } from '../../helpers/utils'
+import MoonLoader from 'react-spinners/MoonLoader'
 
 const Search: FC = () => {
 
     const { t } = useTranslation('global')
     const [search, setSearch] = useState<string>('')
     const [showSearch, setShowSearch] = useState<boolean>(false)
-    const { data } = useGetServiceSearch(search)
+    const { data, isPending } = useGetServiceSearch(search)
     const ref = useOutsideClick(() => {
         setShowSearch(false)
     })
 
     useEffect(() => {
 
-        if (data?.data && data?.data?.services?.length) {
+        if (search.length) {
             setShowSearch(true)
         } else {
             setShowSearch(false)
@@ -41,17 +42,27 @@ const Search: FC = () => {
                 showSearch &&
                 <div ref={ref} className='absolute shadow bg-white top-[100%] rounded-xl right-0 w-[270px] p-4 flex flex-col gap-4 overflow-y-auto max-h-screen'>
                     {
-                        data?.data?.services?.map((item: ServiceType, index: number) => {
-                            return (
-                                <Link onClick={() => setShowSearch(false)} to={Pages.services.detail + item.slug} key={item.id} className={clx(
-                                    'flex gap-3 items-center border-b pb-4',
-                                    data?.data?.services?.length === index + 1 && 'border-b-0 pb-0'
-                                )}>
-                                    <img src={item.icon} className='size-8 rounded-lg' />
-                                    <div className='text-[13px]'>{item.name}</div>
-                                </Link>
-                            )
-                        })
+                        isPending ?
+                            <div className='flex justify-center'>
+                                <MoonLoader color='black' size={20} />
+                            </div>
+                            :
+                            data?.data?.services?.length === 0 ?
+                                <div className='flex justify-center text-sm text-gray-400'>
+                                    نتیجه ای یافت نشد.
+                                </div>
+                                :
+                                data?.data?.services?.map((item: ServiceType, index: number) => {
+                                    return (
+                                        <Link onClick={() => setShowSearch(false)} to={Pages.services.detail + item.slug} key={item.id} className={clx(
+                                            'flex gap-3 items-center border-b pb-4',
+                                            data?.data?.services?.length === index + 1 && 'border-b-0 pb-0'
+                                        )}>
+                                            <img src={item.icon} className='size-8 rounded-lg' />
+                                            <div className='text-[13px]'>{item.name}</div>
+                                        </Link>
+                                    )
+                                })
                     }
                 </div>
             }