Show a loading state for the Navigation Bar.

[techanvil]

Feature Description

At present, there is a layout shift on the Dashboard due to the Navigation Bar not being rendered at all while its required state is loading.

Loading:

Loaded:

We should display the Navigation Bar in a loading state to avoid this layout shift.

---

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

Acceptance criteria

• The Navigation Bar on the Dashboard should be displayed in a loading state until its required state is available.
• The loading state should use an appropriately sized preview block to avoid a layout shift on load.

Implementation Brief

• Edit the DashboardNavigation entry point file at assets/js/components/DashboardNavigation/index.js
• Replace the code block containing the conditional check for viewableModules === undefined || keyMetrics === undefined with a <LoadingWrapper> component that defines the same condition for it's loading prop, ie:

  <LoadingWrapper
  ...
  loading={ viewableModules === undefined || keyMetrics === undefined }
  >
  <Navigation />
  </LoadingWrapper

• Retain important comments regarding the need to only render the navigation once viewableModules and keyMetrics data has been obtained.
• Ensure that the <Navigation/> component is returned as the only child.
• Ensure that the width of the <LoadingWrapper> component is 100%.
• Ensure that the <LoadingWrapper> component matches the height of the <Navigation /> component to avoid a layout shift.
  • A solution may be to apply the same class as the nav to the <LoadingWrapper> component, i.e className="mdc-chip-set googlesitekit-navigation googlesitekit-navigation--mainDashboard"
• Implement the necessary loading state story for the navigation, within the existing story file at assets/js/components/DashboardNavigation/index.stories.js
• Fix any VRT failures that may occur as a result of said introduction of the <LoadingWrapper> component.

Test Coverage

• Add the applicable story scenario to the existing story file at assets/js/components/DashboardNavigation/index.stories.js in order to correctly showcase the loading state of DashboardNavigation.

QA Brief

• Open the Site Kit dashboard.
• Verify that the navigation bar shows a loading preview block when it loads, thus preventing a layout shift.
• Do note that in cases/screen sizes where the navigation bar chips need to wrap into two/more lines, it isn't possible to prevent the layout shift entirely, as it isn't possible to determine if the chips will wrap into two/more lines in advance during the loading stage.

Changelog entry

• Show a loading state in the navigation bar to reduce layout shifts.

[tofumatt]

Sounds good 👍🏻

We might want to tweak the loading state's width/number of elements/etc. but I think this largely sounds good 🙂

IB ✅

[nfmohit]

Hi @10upsimon!

Ensure that the <LoadingWrapper> component matches the height of the <Navigation /> component to avoid a layout shift.

• A solution may be to apply the same class as the nav to the <LoadingWrapper> component, i.e className="mdc-chip-set googlesitekit-navigation googlesitekit-navigation--mainDashboard"

Unfortunately, just using the same class doesn't make the preview blocks adapt to the height of the navigation bar. The height of the navigation bar is dynamic based on the height of the chips and their quantity. In the proposed PR, I have set it to two fixed heights for mobile & non-mobile viewports. However, this solution isn't perfect as the layout shift would still occur when the chips wrap into two or more lines (as it isn't possible to determine if they'll wrap at the loading stage).

Any thoughts?

CC: @tofumatt

[10upsimon]

Any thoughts?

@nfmohit I see what you mean, and I agree that it is probably impossible to determine the wrapping final state at the loading state level. In my testing on desktop and mobile, the proposed solution feels more than acceptable, and I do not notice any layout shift, although as you say it may exist in minute proportions.

This LGTM!

[wpdarren]

QA Update: ✅

Verified:

• The navigation bar shows a loading preview block when it loads, thus preventing a layout shift.
  • I tested this on desktop and smaller viewports, i.e. mobile.
  • Tested with different modules disconnected/connected including Key Metrics and AdSense.
  • Didn't notice any layout shift.

https://github.com/google/site-kit-wp/assets/73545194/5ce1d700-d32c-4867-8bce-af8d41ca71ec