Inconsistent loading state in Search Console popular keyword dashboard widget components

[aaemnnosttv]

Bug Description

The DashboardWidgetPopularKeywordsTable (legacy) and DashboardPopularKeywordsWidget (Widgets API) components currently have an odd loading state in the dashboard which is inconsistent with others, particularly in its size which causes the layout to shift between loading and loaded states.

This is only visible briefly on the dashboard but is consistently reproducible.

Steps to reproduce

1. Set up Site Kit and go to the dashboard
2. Clear the browser's session storage
3. Reload the page with a focus on the first (left-most) widget under the Popularity heading
4. Notice the widget only fills a single grid column and the other widgets are horizontally displaced
5. The widget is also missing the white border and padding like the AnalyticsDashboardWidgetPopularPagesTable has

Screenshots

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The Search Console LegacyDashboardWidgetPopularKeywordsTable component should render a consistent loading state with other dashboard widgets so that it fills its full area and has the same visual treatment (white background, with footer)

New widget-based components will be handled in a new issue per #2022 (comment)

Implementation Brief

Edit LegacyDashboardWidgetPopularKeywordsTable.js

• Modify rendering of PreviewTable so that it renders as a child of the already included Layout component.

QA Brief

• Go to the dashboard
• Clear the browser's session storage
• Reload the page with a focus on the legacy popularity widgets at the bottom
• Check that popularity widgets fill full row correctly.

Changelog entry

• Fix inconsistent loading state in Search Console Popular Keywords widget, which previously caused content shifting.

[felixarntz]

@caseymorrisus Did you accidentally miss something here? The IB is empty :)

[caseymorrisus]

@caseymorrisus Did you accidentally miss something here? The IB is empty :)

That's my bad, must've left it on the preview tab and missed hitting save. Should be good now!

[felixarntz]

@caseymorrisus

Edit DashboardPopularPagesWidget.js and DashboardPopularKeywordsWidget.js

I think this change also needs to be added to LegacyDashboardWidgetPopularKeywordsTable.js, which is the actual component where this currently surfaces in production (the components you mentioned need to be updated as well, but they're the new widgets which right now are only available in a development build). It also applies to LegacyAnalyticsDashboardWidgetPopularPagesTable.js, but there it's already handled correctly (as seen in the code and the above screenshare).

[felixarntz]

IB ✅

[cole10up]

Tested

Installed, activated and setup latest development SK. Cleared session storage, refreshed page.

Refreshed from different pages, to confirm no other functionality was broken.

Passed QA ✅