site-kit-wp icon indicating copy to clipboard operation
site-kit-wp copied to clipboard
verified publisher icon google

Implement the loading state for the Selection Panel

Open techanvil opened this issue 1 year ago • 5 comments

Feature Description

Implement the loading state for the Selection Panel.

See selection panel > loading state in the design doc.

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

Acceptance criteria

  • The cached audiences should be resynced the first time the Selection Panel is opened on a given page load.
  • While the cached audiences are being resynced and the user counts for audiences are loading, the Selection Panel should be displayed in its loading state, with preview blocks in place of the listed audiences.
  • Assuming that an audience selection exists, this should follow the Figma design as it stands.
  • However, if the audience selection has been cleared (this could happen as a side effect of clearing an invalid selection via https://github.com/google/site-kit-wp/issues/8155), the audience preview blocks should be displayed in a flat list, without the "Current selection" and "Additional groups" titles.

Implementation Brief

Core Loading State

  • [x] Update assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceItems.js;
    • [ ] Use withIntersectionObserver HOC to detect when the component is in view, wrapping SelectionPanelItems as SelectionPanelItemsWithIntersectionObserver.
    • [ ] Create a new callback to pass to the onInView prop of the SelectionPanelItemsWithIntersectionObserver. Call it onInView;
      • [ ] Use useState to track firstView, defaults to true, and return early if firstView is false.
      • [ ] Trigger the syncAvailableAudiences action.
      • [ ] Update firstView to false.
  • [ ] Use the hasFinishedResolution selector for the getAvailableAudiences selector, and each audience total getReport selector to get a single, boolean, isLoading value. https://github.com/google/site-kit-wp/blob/e12d144418423b637879d8dd0f0d181acaa89b1b/assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceItems.js#L96-L117
  • [ ] Create a new component assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceItemPreviewBlock.js which uses multiple PreviewBlock components and relevant CSS to create a preview element for a single AudienceItem which matches the FIGMA designs.
  • [ ] If isLoading is true, pass AudienceItemPreviewBlock instead of AudienceItem to SelectionPanelItemsWithIntersectionObserver, ItemComponent prop.

Cleared Audience Selection Case

  • [ ] Continue to update assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/AudienceItems.js;
    • [ ] Get the configured audiences, using the getConfiguredAudiences selector.
    • [ ] Within the new onInView callback, if none of the configured audiences are present in the available audiences (using the existing audiences const), set a useState called noAudiencesAvailable to true.
    • [ ] If noAudiencesAvailable is true, on the returned SelectionPanelItemsWithIntersectionObserver component;
      • [ ] Do pass the savedItemSlugs prop - this will cause all AudienceItemPreviewBlock's to be rendered in a single list.
      • [ ] Pass all audiences to availableUnsavedItems.

Test Coverage

  • Add these two new loading states to assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceSelectionPanel/index.stories.js

QA Brief

  • Setup Site Kit with audienceSegmentation feature flag enabled
  • Setup Analytics module
  • Open the audience segmentation panel, verify that it is loading for a second, and loader matches the figma designs referenced in AC
  • Select one, or more audience groups, and refresh the page
  • Open the panel again, verify that loader is properly showing within the sections, and looks as in figma designs

Changelog entry

techanvil avatar Jan 25 '24 11:01 techanvil

I've moved this back to Backlog as the final in-progress changes to the design doc, relating to audience caching, will probably affect the AC for this one

techanvil avatar Mar 28 '24 14:03 techanvil

The audience caching aspect of the design doc has been sufficiently finalised, I've updated the AC and moved this back to IB.

techanvil avatar Apr 05 '24 14:04 techanvil