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 && (