Prevent Flashing on NextJs app.
Hi, when trying to use the Inbox component I keep experiencing a problem where the bell flashes into existence, it's annoying. Is there anything I can do to combat this?
14 Replies
Also why is there content shifting when content is marked as read and why does the tooltip go all glitchy?
Hi @Noah-Haf , not sure about the second one, @Pawan Jain , can you help out here? As for the first, can you confirm the flash occurred after subscriber id is available in the context of your app?
Good evening - I'm using a react server component, so it should be available immediately.
Ok, I’ll let @Pawan Jain take the lead, he should have better ways to investigate this 👀
Good evening 🌆
Additionally if it helps this is an example of the content shifting about.
Any update on this?
@Noah-Haf
Novu
<Inbox /> is client-only component.
1. first issue - the bell flashes into existence is due to delayed hydration
2. second issue - tooltip content shifting is a bug that I can reproduce, and checking with my team on this. I will keep you updatedMuch appreciated, Is there any way to counter the flashing?
@Noah-Haf, you just advanced to level 1!
Linking this with internal linear ticket
NV-6461 - 🐛 [Inbox] Fix tooltip content layout shift
@pawan said:
2. Tooltip content layout shft - I can reproduce this, and it looks like it is a bugc3884b68-3c1f-43c5-92e0-b3a23afb7438 0aeb7810-0840-49fb-b9d6-717912abf058
Status
Triage
Workflows
Much appreciated.
small updated: tooltip content layout shift is fixed in this PR https://github.com/novuhq/novu/pull/8943
It will be fixed in the new
It will be fixed in the new
@novu/react version