HomePhabricator
Diffusion Comm 2213b281c1e8

[web] Introduce `BackgroundIllustration` component to replace S3-hosted asset

Description

[web] Introduce BackgroundIllustration component to replace S3-hosted asset

Summary:
Context: https://linear.app/comm/issue/ENG-1584/[web]-replace-s3-svg-urls-with-svgr-generated-react-components

We previously were fetching background-illustration.svg from S3. It took a second for the SVG to download, which led to the page reflowing. We got around the reflowing issue by explicitly stating the height/width of every SVG asset so there was some "placeholder space" left for the asset to fill once it loaded. This led to an expensive process when adding SVG assets to web.

Instead, we can convert the SVG into a React component using SVGR (https://react-svgr.com/playground/) and include it in the repo. This also lets us avoid fetching the asset once the app has loaded.

Test Plan:
Things continue to look as expected.

Before:

Screen Shot 2022-08-09 at 2.37.28 PM.png (670×818 px, 65 KB)

After:

Screen Shot 2022-08-09 at 2.38.11 PM.png (670×818 px, 65 KB)

Before (Inspect element):

Screen Shot 2022-08-09 at 2.39.11 PM.png (84×1 px, 56 KB)

After (Inspect element):

Screen Shot 2022-08-09 at 2.38.29 PM.png (292×2 px, 174 KB)

Reviewers: varun, abosh, tomek, jacek, ashoat

Reviewed By: abosh, ashoat

Subscribers: adrian

Differential Revision: https://phab.comm.dev/D4785

Details

Provenance
atulAuthored on Aug 9 2022, 11:40 AM
Reviewer
abosh
Differential Revision
D4785: [web] Introduce `BackgroundIllustration` component to replace S3-hosted asset
Parents
rCOMM9c2e2cdfe45d: [Nix] Expose gtest for services tests
Branches
Unknown
Tags
Unknown