AI Admin Pages Exhibit Visible Flicker During Initial Render

[ankitguptaindia]

AI-related admin screens exhibit a noticeable visual flicker during page navigation and initial render. When navigating to the AI or Connectors pages, the existing admin UI is briefly replaced by a black/blank screen before the page content is rendered.

In contrast, standard WordPress admin pages transition smoothly without any visible intermediate state. This creates an inconsistent user experience and gives the impression that AI pages are slower or undergoing a full-page reload.

Environment

• WordPress AI Plugin: Version 1.0.2
• Environment: WordPress Playground
• Browser: Chrome V 149.0.7827.115

Notes

• Reproduced consistently on a fresh WordPress Playground instance.
• The issue appears to be specific to AI-related pages and not the general WordPress admin experience.
• This may indicate a loading-state, rendering, or hydration issue during page initialisation.
• No functional issues were observed; this is primarily a UX/performance concern.

Step-by-step reproduction instructions

Steps to Reproduce

1. Launch a fresh WordPress Playground instance.

2. Install and activate the latest version of the AI plugin.

3. Navigate between standard WordPress admin pages (Dashboard, Posts, Pages, Plugins, etc.).

4. Observe that pages load normally without any visual flash.

5. Navigate to:

   • AI
   • Connectors

6. Observe the page loading behavior.

Screenshots, screen recording, code snippet

Recording.1864.mp4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except the AI plugin.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Trushiv04]

I looked into this locally. The flicker appears to come from the inline critical styles in the generated AI admin page, where #wpwrap is given a dark background:

#wpwrap { background: var(--wpds-color-fg-content-neutral, #1e1e1e); }

On initial load, before the boot module mounts the app into .boot-layout-container, the CSS variable isn't available yet, so the #1e1e1e fallback paints the entire wrap dark for a moment producing the black flash before content renders.

Since this lives in an auto generated page file (driven by the boot/routes build), it likely needs to be addressed at the source rather than the generated output. Sharing in case it helps narrow down the fix.