Review graphic imported in `NoAudienceBannerWidget`
- 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
Assessment
This issue has not been assessed yet.