Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SkeletonThumbnail] Thumbnail and SkeletonThumbnail sizes differ #1135

mbaumbach opened this issue Mar 6, 2019 · 3 comments


Copy link

commented Mar 6, 2019

Issue summary

The SkeletonThumbnail and Thumbnail each provide a size prop, but the resulting size of the elements differ which can cause shifting should a SkeletonThumbnail be replaced with a Thumbnail after loading is completed.

Expected behavior

When using the same size prop for both SkeletonThumbnail and Thumbnail the elements will take up the same width and height on the page.

Actual behavior

The following shows the widths and heights of the various sizes of the two components:

small: 30x30
medium: 40x40
large: 50x50

small: 40x40
medium: 60x60
large: 80x80

While they don't line up for any size, they also scale at different rates, with SkeletonThumbnail going up by increments of 10x10 pixels with each size and Thumbnail going up by 20x20 pixels.

Steps to reproduce the problem

  1. Create a SkeletonThumbnail with any size.
  2. Create a Thumbnail of the same size.
  3. Compare the sizes of the width and height.

Reduced test case

This CodeSandbox shows the various SkeletonThumbnail and Thumbnails side by side:


  • Are you using the React components? (Y/N): Y
  • Polaris version number: 3.9.0
  • Browser: Google Chrome Version 72.0.3626.121 (Official Build) (64-bit)
  • Device: MacBook Pro
  • Operating System: macOS High Sierra 10.14.3

@mbaumbach mbaumbach changed the title [SkeletonThumbnail] Thumbnail and ThumbnailSkeleton sizes differ [SkeletonThumbnail] Thumbnail and SkeletonThumbnail sizes differ Mar 6, 2019

@chloerice chloerice self-assigned this Mar 7, 2019


This comment has been minimized.

Copy link

commented Mar 7, 2019

Thanks for raising this @mbaumbach, putting up a fix now!


This comment has been minimized.

Copy link

commented Mar 7, 2019

v3.10.0 was just released with this fix among a bunch of other goodies 😁


This comment has been minimized.

Copy link
Contributor Author

commented Mar 8, 2019

Thanks for the fast turnaround @chloerice! Fix is working great and we already deployed it to our production apps. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
3 participants
You can’t perform that action at this time.