Skip to content

Preload widgets for the dashboard tour #12521

@techanvil

Description

@techanvil

Feature Description

The dashboard tour will be updated to preload the widgets that are included in the current tour. The widgets will be loaded when the Welcome modal is shown, or when the tour is triggered from the help menu.

For reference, see the preload widgets for the dashboard tour section in the design doc.


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

Acceptance criteria

  • When either the Analytics-connected or Search Console-only dashboard tour is shown, the widgets that are included in the tour start loading immediately, instead of waiting for them to be scrolled into view before loading.

Implementation Brief

In assets/js/feature-tours/welcome.ts:

  • Update the tour object returned by getWelcomeTour() to include a preloadWidgetAreas property, populated with the relevant widget area slugs for the tour variant (i.e. the slugs of the widget areas containing the targets referenced in steps).

Test Coverage

  • Add tests for getWelcomeTour() to cover the above changes.

QA Brief

Setup

  • Set up Site Kit with the setupFlowRefresh feature flag enabled.
  • Open the browser DevTools and have the Console ready (we'll use it to inspect the CORE_UI store state).

Test the Analytics-connected tour variant

  1. Complete Site Kit setup with Analytics connected, so the welcome modal appears on the dashboard.

  2. Refresh the dashboard and immediately scroll to the very top so the Audience tiles, Popular pages, and Traffic widgets are not in view.

  3. Click Start tour in the welcome modal.

  4. Verify the forced-in-view-widget-areas value — run this in the browser console:

    googlesitekit.data
        .select( 'core/ui' )
        .getValue( 'forced-in-view-widget-areas' );

    Expected: the array contains exactly these four slugs (order is not important):

    • mainDashboardKeyMetricsPrimary
    • mainDashboardTrafficPrimary
    • mainDashboardTrafficAudienceSegmentation
    • mainDashboardContentPrimary
  5. Verify visual preloading — walk through the tour by clicking Next between steps without manually scrolling away. Each step's targeted widget should already be populated (no loading spinner) when the step is reached. Specifically:

    • Step 1 (Key Metrics) — Key Metrics tiles already populated.
    • Step 2 (Analytics All Traffic) — Traffic chart already rendered.
    • Step 3 (Audience tiles) — Audience tiles already rendered.
    • Step 4 (Popular pages) — Popular pages table already populated.

Test the Search Console-only tour variant

  1. Set up Site Kit without Analytics connected (Search Console only).

  2. Dismiss the welcome modal if it appeared, then open the help menu (? icon in the top-right) and click Take the dashboard tour to trigger the tour.

  3. Scroll to the very top of the dashboard before walking through the tour.

  4. Verify the forced-in-view-widget-areas value — run the same console snippet as above.

    Expected: the array contains exactly:

    • mainDashboardTrafficPrimary
    • mainDashboardContentPrimary
  5. Verify visual preloading — walk through the tour. Each step's targeted widget should be populated when reached:

    • Step 1 (Search Funnel) — funnel chart already rendered.
    • Step 2 (Popular Keywords) — keywords table already populated.

Changelog entry

  • Preload widgets for the dashboard tour.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P0High priorityTeam MIssues for Squad 2Type: EnhancementImprovement of an existing feature

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions