Unread notifications vanish on the app-root pages

[eatyourgreens]

Package

• app-root

Describe the bug

Unread notifications vanish when I go from Talk to the new home page, then reappear when I go back to Talk.

To Reproduce

Here's a video where I've got 2 unread notifications in the top bar, but they don't appear on the home page.

Screen.Recording.2024-09-24.at.16.05.52.mov

Expected behavior

Unread notifications should be consistent across the various different React apps that make up the Zooniverse site.

[goplayoutside3]

@eatyourgreens is this true for all app-root pages? Or just the homepage at /?

[yshish]

It happens to me with unread messages. After counting 45 seconds, the unread messages do get loaded on the home page. @eatyourgreens have you tried waiting for so long? :)

[eatyourgreens]

@goplayoutside3 here's a longer video where I click around a few different pages, including Panoptes Front End and both Next.js apps. Notifications are missing across all the pages from the new app (app-root.) Might be related to #6336.

@yshish I haven't tried waiting to see if the notifications load eventually.

Screen.Recording.2024-09-24.at.16.36.00.mov

[yshish]

(Ah, just visited the home page again to see whether it happens for both notifications and messages to me and waited for longer than 2 minutes before the unread loaded. And yes, it happens for both.)

[eatyourgreens]

I just waited for 2 minutes on the home page but nothing changed, so maybe this is a different bug from #6336.

EDIT: and, of course, as soon as I posted that, my notification count did load in the tab that's showing the Zooniverse home page. So yes, notifications do load if I wait for 2 or 3 minutes.

[eatyourgreens]

I can reproduce that by leaving the home page, going to Talk, and coming back to the home page. I can also force the home page to reload notifications, by going to another tab then back to the Zooniverse tab, which forces the API request to refresh. In that case, unread notifications generally show up.

[eatyourgreens]

OK, after a bit of playing around on the Zooniverse site, here's my workaround to make notifications appear instantly:

1. Go from Talk (or wherever) to the home page.
2. If the home page isn't showing your notifications, switch to another tab in your browser.
3. Switch straight back to the Zooniverse home page tab.
4. Notifications should be showing on the home page now.

Technical details: I think I implemented the notifications count with SWR, which refreshes API data when either tab visibility or tab focus changes, so switching to a new tab and back can force it to perform a data fetch.

So many sites use SWR, or React Query, now that I use this trick on many web pages to force data to refresh.

[eatyourgreens]

This bug vanishes if you go into local storage and delete the panoptes-user object, so I think it's caused by stale notification counts cached in local storage.

[eatyourgreens]

D'oh! Notifications and messages don't wait for auth.checkCurrent() to resolve, so they are requesting personal data before you have finished logging in.
https://zooniverse.github.io/panoptes-javascript-client/#panoptes-javascript-client-auth-authcheckbearertoken

I somehow managed to forget my own documentation when I wrote those hooks.