Description

Every page transition in the admin area cause a layout shift when the notifications render.

Step-by-step reproduction instructions

1. Transition between pages in the admin area.

Screenshots, screen recording, code snippet

Environment info

• latest develop branch b1519c8
• npx wp-env start

Possible Solutions

Because React cannot be rendered on the server, I suggest we consider using Dynamic Blocks for the UI components. This would provide SSR (unsure how client hydration can/does work, will need more research). We would be using blocks outside the editor, but this is what is planned for the new Admin area, as detailed in this post: Thinking Through the WordPress Admin Experience.

A good place to experiment would be the dashboard, which causes the layout shift issue. The Notification Hub (sidebar) does not cause the layout shift issue when client rendered. While it would be interesting to remember the state of the sidebar and server render it in the appropriate state, the idea should be saved for a later iteration, if experiments with Dynamic Blocks are successful.

Revision 1

After receiving advice, I don't believe my initial proposal will solve the problem. Currently there isn't a good solution to hydrate blocks with React outside the editor. Work is being done to accomplish this, but it is very experimental.

Revision 2

This could be promising. Keep an eye on how it matures The Interactivity API – A better developer experience in building interactive blocks