Skip to content

Fix Site Information plugin list flicker during REST load - #7

Merged
jakemgold merged 3 commits into
WordPress:mainfrom
itzmekhokan:fix/bug
Jun 6, 2026
Merged

jakemgold merged 3 commits into
WordPress:mainfrom
itzmekhokan:fix/bug

Conversation

@itzmekhokan

@itzmekhokan itzmekhokan commented May 21, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Fixes #5 — the Site Information tab showed partial DOM-detected plugin counts (e.g. 4 plugins) while REST data was still loading, then jumped to the final count (e.g. 18 plugins) and caused visible UI flicker.

  • Defer plugin pill rendering until the lazy GET_SITE_INFO fetch completes.
  • Show a stable Plugins label with a Loading… hint during fetch; only show the count once data is final.
  • Extract mergePlugins / mergeTheme into lib/site-info.js with smoke tests.

Test plan

  • cd test && npm install && npm test (smoke + site-info merge tests)
  • npm run build
  • Load unpacked extension on a WP site with 10+ plugins, open Site Information, confirm no count/pill flicker during load
  • Verify logged-out fallback still shows detected plugins after load when REST plugins endpoint is unavailable

Defer rendering DOM-detected plugin counts until the lazy site-info
fetch completes, so the panel shows a stable loading state instead of
jumping from partial to final counts. Extract merge helpers to
lib/site-info.js and add smoke coverage.

Fixes WordPress#5
itzmekhokan and others added 2 commits May 21, 2026 21:49
Use a synchronous ref guard so Collapsible cannot start overlapping
GET_SITE_INFO requests before setLoading(true) applies. Snapshot DOM
context at fetch start, hide theme/plugins until the request settles,
and show one panel-level loading state to stop count and layout flicker.

Fixes WordPress#5
# Conflicts:
#	dist/popup.css
#	dist/popup.js
jakemgold
jakemgold previously approved these changes Jun 6, 2026

@jakemgold jakemgold left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verified end-to-end:

  • Local merge with current main (post PR #14 + #16) — only conflict was dist/ artifacts, resolved by taking main's version (rebuilt anyway)
  • npm run build — clean
  • npm test --prefix test — all green, including the new mergePlugins / mergeTheme scenarios
  • npm run package:chrome and npm run build:safari — both succeed, layouts correct

The synchronous fetchStartedRef guard plus the snapshot-at-fetch-time is the right shape for the race that caused the flicker. Empty pluginRows during loading also prevents the partial-data flash. Thanks @itzmekhokan.

@jakemgold jakemgold left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Re-approving after pushing the main-merge conflict resolution (dist/ artifacts). Verification still stands: build clean, all tests pass, packaging works.

@jakemgold
jakemgold merged commit 3dbb45b into WordPress:main Jun 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug Report: Plugin UI Flickering on clicking Site Information Tab

2 participants