google / google/site-kit-wp

Review graphic imported in `NoAudienceBannerWidget`

Open
#9,355 3 comments 0 reactions 1 assignee Assigned to @ankitrox View on GitHub
Feature: Audiences P2 Team M Type: Enhancement
Dominant language
JavaScript
Stars
1.4k
Forks
383
Avg merge
4d 14h
Merged PRs (30d)
77

Description

## Feature Description

The graphic that is imported in `NoAudienceBannerWidget` (`no-audience-banner-graphic.svg`) is 87KB, which is quite large. This affects the bundle size.

This graphic should be reviewed to ensure that it was exported correctly from Figma. If applicable, it should be lazy loaded.

---------------

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

## Acceptance Criteria

- No initial JS bundle contains the full SVG markup.
- There should be a separate request for the SVG image in the browser console.

## Implementation Brief

- [ ] In `assets/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTilesWidget/PlaceholderTile.js`
- Use `useIntersection` to check whether the element should be visible. Use the threshhold value as per other instances in the codebase.
- Use `useState` to for `svgURL` and setting it via an `setSvgURL` setter returned by `useState`
- In an effect hook, check if svg should be visible and `svgURL` is not set. If that is the case, Import the graphic with `?url`. Set the `svgURL` once import is done.
- Render the SVG using `img` tag in the component.
- Render `PreviewBlock` component when `svgURL` is not set.
- Wrap above `img` and `PreviewBlock` within `MediaErrorHandler` to render any error state while loading the graphic.

- [ ] In `assets/js/components/LeanCTABanner.js`
- Update the prop type of `SVGGraphic` to be one of react element or string
- If `SVGGraphic` is string, render `img` element.

- [ ] In `assets/js/modules/analytics-4/components/audience-segmentation/dashboard/NoAudienceBannerWidget/NoAudienceBanner.js`
- Import `NoAudienceBannerGraphic` with `?url`
- In `SVGGraphic` prop of `LeanCTABanner` component, pass `NoAudienceBannerGraphic` if `props.isInView` is `true`, else `null`.

### Test Coverage

None.

## QA Brief

*

## Changelog entry

*

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.