Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] Notifications panel flashes double state #11758

Merged
merged 6 commits into from
Nov 1, 2024
Merged

[Bug] Notifications panel flashes double state #11758

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4eb1f5e
Pause live notification query till max pages query is finished
Oct 15, 2024
b9e59fb
Merge branch 'main' into 11604-fix-notification-panel-flash-double-state
Oct 15, 2024
69fcc53
Merge branch 'main' into 11604-fix-notification-panel-flash-double-state
Oct 29, 2024
dca9aac
Merge branch 'main' into 11604-fix-notification-panel-flash-double-state
Oct 31, 2024
d2032ec
Wait for live notifications to stop fetching
Oct 31, 2024
f550b67
Merge branch 'main' into 11604-fix-notification-panel-flash-double-state
yonikid15 Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions apps/web/src/components/NotificationList/NotificationList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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 (
<>
<NotificationActions
Expand Down Expand Up @@ -120,14 +119,17 @@ const NotificationList = ({
<NotificationListPage
key={`notification-page-${currentPage}`}
page={currentPage}
exclude={liveIds}
excludeIds={liveIds}
isLastPage={currentPage === pagesToLoad}
onlyUnread={onlyUnread}
inDialog={inDialog}
onRead={onRead}
{...((!paginate || limit) && {
first: limit ?? 100,
})}
fetchingLiveNotifications={
fetchingLiveNotifications || fetchingMaxPages
}
/>
);
})}
Expand Down
48 changes: 30 additions & 18 deletions apps/web/src/components/NotificationList/NotificationListPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand All @@ -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: {
Expand All @@ -75,34 +78,43 @@ 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<HTMLAnchorElement & HTMLButtonElement>(
null,
);

return (
<>
{notifications.length > 0 ? (
{isLoading ? (
<Loading inline />
) : (
<>
{notifications.map((notification, index) => (
<NotificationItem
key={notification.id}
focusRef={
index === 0 && page !== 1 ? firstNewNotification : undefined
}
notification={notification}
inDialog={inDialog}
onRead={onRead}
/>
))}
{notifications.length > 0 ? (
<>
{notifications.map((notification, index) => (
<NotificationItem
key={notification.id}
focusRef={
index === 0 && page !== 1 ? firstNewNotification : undefined
}
notification={notification}
inDialog={inDialog}
onRead={onRead}
/>
))}
</>
) : null}
</>
) : null}
{fetching && exclude.length === 0 && <Loading inline />}
)}
{showNullMessage && (
<NotificationPortal.Portal
containerId={NULL_MESSAGE_ROOT_ID}
Expand Down
Loading