Page MenuHomePhabricator

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

Authored by atul on Aug 9 2022, 12:02 PM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Nov 11, 1:51 AM
Unknown Object (File)
Mon, Oct 28, 5:07 AM
Unknown Object (File)
Mon, Oct 28, 5:07 AM
Unknown Object (File)
Mon, Oct 28, 5:05 AM
Unknown Object (File)
Sun, Oct 27, 1:05 AM
Unknown Object (File)
Oct 6 2024, 2:09 PM
Unknown Object (File)
Sep 16 2024, 2:22 PM
Unknown Object (File)
Sep 16 2024, 2:22 PM
Subscribers

Details

Summary

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

We previously were fetching all-notifs.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.


Depends on D4785

Test Plan

Things continue to look as expected.

Before:

Screen Shot 2022-08-09 at 3.00.54 PM.png (1×868 px, 97 KB)

After:

Screen Shot 2022-08-09 at 2.59.13 PM.png (1×868 px, 126 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul requested review of this revision.Aug 9 2022, 12:12 PM
This revision is now accepted and ready to land.Aug 9 2022, 12:19 PM
This revision now requires review to proceed.Aug 9 2022, 12:25 PM
This revision is now accepted and ready to land.Aug 9 2022, 12:39 PM