npm react-loading-skeleton 3.0.0

latest releases: 3.3.1, 3.3.0, 3.2.1...
3 years ago

Migration Guide

  1. Add the new required CSS import:

    import 'react-loading-skeleton/dist/skeleton.css'
  2. Read the full list of breaking changes to see if any affect you.

Breaking Changes

  • Drop Emotion dependency, add CSS file that must be imported
    • Dropping Emotion avoids conflicts when multiple Emotion versions are used
      on one page and reduces bundle size
  • Reimplement SkeletonTheme using React context
    • The old SkeletonTheme rendered a <div> which was undesirable in many
      cases. The new SkeletonTheme does not render any DOM elements.
    • The old SkeletonTheme did not work if the Skeleton was rendered in a
      portal. The new SkeletonTheme does work in this case.
  • SkeletonTheme: rename the color prop to baseColor
  • Convert to TypeScript
  • Publish code as ES2018 to reduce bundle size
  • Require React >= 16.8.0
  • Drop Internet Explorer support

If you need to support Internet Explorer or use an old version of React, please
continue to use react-loading-skeleton v2.

Features

  • Add many new style-related props to SkeletonTheme
  • Publish an ES module in addition to a CommonJS module
  • Add direction prop to support right-to-left animation
  • Add enableAnimation prop to allow disabling the animation
  • Add containerClassName prop to allow customizing the container element
  • Add containerTestId to make testing easier
  • Add aria-live and aria-busy attributes to the skeleton container to
    improve screen reader support

Other Changes

  • Optimize animation performance:
    • The old animation animated the background-position property which made
      the browser repaint the gradient on every frame.
    • The new animation animates the transform of a pseudoelement. This
      avoids repaints and results in an observable decrease in CPU usage.
  • No longer require width and height to be set for the circle prop to
    work
  • Change the default duration from 1.2 s to 1.5 s
  • Make the default Skeleton base color a tiny bit darker so that the
    animation is more visible

Bug Fixes

  • Several common issues are now resolved as a result of removing Emotion
  • Fix multi-line skeletons not working with the width prop
  • Fix the type of the wrapper prop in the type definitions

Thanks!

Don't miss a new react-loading-skeleton release

NewReleases is sending notifications on new releases.