other services

src/pages/notification/Notification.tsx

@@ -9,6 +9,7 @@ import { useGetNotification } from './hooks/useNotificationData';
 import { NotificationItemType } from './types/NotificationTypes';
 import { timeAgo } from '../../config/func';
 import InfiniteScroll from 'react-infinite-scroll-component';
+import MoonLoader from "react-spinners/MoonLoader"
 
 const Notifications: FC = () => {
     const { t } = useTranslation('global');
@@ -29,7 +30,7 @@ const Notifications: FC = () => {
             <Notification onClick={() => setShowModal(!showModal)} size={18} color="black" />
 
             {showModal && (
-                <div className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-50 xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 ">
+                <div id='notificationsContainer' className="xl:h-[calc(100%-110px)] h-[70%] p-6 z-50 xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 ">
                     <div className="flex justify-between items-center">
                         <div>{t('notif.natification')}</div>
                         <div className="size-7 rounded-full bg-white bg-opacity-35 flex justify-center items-center">
@@ -67,23 +68,15 @@ const Notifications: FC = () => {
                         </div>
                     </div>
 
-                    <div id="notificationsContainer" className="mt-6 flex flex-col gap-4 text-xs overflow-auto">
+                    <div className="mt-6 flex flex-col gap-4 text-xs overflow-auto">
                         <InfiniteScroll
                             dataLength={posts.length}
                             next={fetchNextPage}
                             hasMore={hasNextPage}
-                            loader={<h4>در حال بارگذاری...</h4>}
-                            scrollThreshold={0.9}
-
-
-
-
+                            loader={<div className='flex justify-center'><MoonLoader color="black" size={20} /></div>}
+                            scrollableTarget="notificationsContainer"
                         >
-                            {isLoading ? (
-                                <h4>در حال بارگذاری...</h4>
-                            ) : isFetching ? (
-                                <h4>در حال بارگذاری صفحه بعدی...</h4>
-                            ) : (
+                            {
                                 posts.map((item: NotificationItemType) => (
                                     <div className="bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 mb-4 flex" key={item.id}>
                                         <div className="mt-1">
@@ -101,7 +94,7 @@ const Notifications: FC = () => {
                                         </div>
                                     </div>
                                 ))
-                            )}
+                            }
                         </InfiniteScroll>
                     </div>
                 </div>