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,6 +42,16 @@ 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'>
                     {
+                        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(