Shopify
[Eslint-plugin] Add `require-media-dimensions` rule
Description
There's a ton of unnecessary layout shifts that happen in the admin and other frontend apps across the org, a lot of which happen in bursts (when one or more individual layout shifts occur in rapid succession with less than 1-second in between each shift and a maximum of 5 seconds for the total window duration — see linked video). A common culprit for this is not specifying explicit dimension attributes for media elements.
Rendering media elements like img and video in the browser without explicitly specifying width and height attributes often would cause an unexpected page movement/jump during load which could interrupt a user's current flow and potentially result in unintended actions which in some cases could be costly — this scenario is called a layout shift.
However, when width and height attributes are specified upfront, modern browsers are able to compute an aspect ratio and reserve the right amount of space while the media loads, leaving only a paint task once the media is ready.
In this video (slowed for illustrative purposes), you'll notice that the layout shifts significantly 4 times in about 2 seconds, which is a lot.
This rule is simply one step towards the right direction of minimizing these jumps — it enforces the presence of width and height attributes on standard media elements (img, video), the Polaris Image component, and provides an avenue to specify custom components and elements that should be analyzed for violations.
There's still a lot that needs to be done to be able to really contain these shifts like exposing interfaces to specify media dimensions for compound components and components that render other media components like EmptyState, Thumbnail etc.
Type of change
- [ ] Patch: Bug (non-breaking change which fixes an issue)
- [x]
@shopify/eslint-pluginMinor: New feature (non-breaking change which adds functionality) - [ ] Major: Breaking change (fix or feature that would cause existing functionality to not work as expected)
Checklist
- [x] I have added a changelog entry, prefixed by the type of change noted above (Documentation fix and Test update does not need a changelog as we do not publish a new version for these changes)
https://shopify.slack.com/archives/C02E6ML0GS1/p1645735515794759?thread_ts=1645721034.727849&cid=C02E6ML0GS1
Closing this. I don't want this to become a dumping ground for anybody in the org. If a team wants a new eslint rule then they can maintain their own package rather than trying to shoehorn everything into @shopify/eslint-plugin and then our team having to maintain it forevermore.
