diff --git a/apps/web/src/components/NotificationList/NotificationList.tsx b/apps/web/src/components/NotificationList/NotificationList.tsx index e31b49b27d9..2c43a91466e 100644 --- a/apps/web/src/components/NotificationList/NotificationList.tsx +++ b/apps/web/src/components/NotificationList/NotificationList.tsx @@ -54,16 +54,16 @@ const NotificationList = ({ const [searchParams] = useSearchParams(); const onlyUnread = searchParams.has("unread") && searchParams.get("unread") !== null; - const [{ data: maxPagesData }] = useQuery({ + const [{ data: maxPagesData, fetching: fetchingMaxPages }] = useQuery({ query: MaxNotificationPages_Query, variables: { where: { onlyUnread }, }, }); - const [{ data }] = usePollingQuery( + const [{ data, fetching: fetchingLiveNotifications }] = usePollingQuery( { query: NotificationPolling_Query, - pause: !live, + pause: !live || fetchingMaxPages, variables: { where: { createdAt: { @@ -85,7 +85,6 @@ const NotificationList = ({ const pagesArray = Array.from(Array(pagesToLoad).keys()); const liveNotifications = unpackMaybes(data?.notifications?.data); const liveIds = liveNotifications.map(({ id }) => id); - return ( <> ); })} diff --git a/apps/web/src/components/NotificationList/NotificationListPage.tsx b/apps/web/src/components/NotificationList/NotificationListPage.tsx index da483b56005..58e91116a10 100644 --- a/apps/web/src/components/NotificationList/NotificationListPage.tsx +++ b/apps/web/src/components/NotificationList/NotificationListPage.tsx @@ -43,10 +43,11 @@ interface NotificationPageProps { page: number; onlyUnread?: boolean; isLastPage?: boolean; - exclude?: Scalars["UUID"]["input"][]; + excludeIds?: Scalars["UUID"]["input"][]; first?: number; inDialog?: boolean; onRead?: () => void; + fetchingLiveNotifications?: boolean; } const NotificationListPage = ({ @@ -56,15 +57,17 @@ const NotificationListPage = ({ isLastPage, inDialog, onRead, - exclude = [], + excludeIds = [], + fetchingLiveNotifications, }: NotificationPageProps) => { const intl = useIntl(); const [searchParams] = useSearchParams(); searchParams.set("page", `${page + 1}`); const [{ data, fetching }] = useQuery({ query: Notifications_Query, + pause: fetchingLiveNotifications, variables: { - excludeIds: exclude, + excludeIds, first: first ?? PER_PAGE, page, where: { @@ -75,11 +78,15 @@ const NotificationListPage = ({ const notifications = unpackMaybes(data?.notifications?.data); + const isLoading = + (fetching || fetchingLiveNotifications) && excludeIds.length === 0; + const showNullMessage = notifications.length === 0 && page === 1 && !fetching && - exclude.length === 0; + !fetchingLiveNotifications && + excludeIds.length === 0; const firstNewNotification = useRef( null, @@ -87,22 +94,27 @@ const NotificationListPage = ({ return ( <> - {notifications.length > 0 ? ( + {isLoading ? ( + + ) : ( <> - {notifications.map((notification, index) => ( - - ))} + {notifications.length > 0 ? ( + <> + {notifications.map((notification, index) => ( + + ))} + + ) : null} - ) : null} - {fetching && exclude.length === 0 && } + )} {showNullMessage && (