Migration Guide
-
Add the new required CSS import:
import 'react-loading-skeleton/dist/skeleton.css'
-
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
- Dropping Emotion avoids conflicts when multiple Emotion versions are used
- Reimplement
SkeletonTheme
using React context- The old
SkeletonTheme
rendered a<div>
which was undesirable in many
cases. The newSkeletonTheme
does not render any DOM elements. - The old
SkeletonTheme
did not work if theSkeleton
was rendered in a
portal. The newSkeletonTheme
does work in this case.
- The old
SkeletonTheme
: rename thecolor
prop tobaseColor
- 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
andaria-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.
- The old animation animated the
- No longer require
width
andheight
to be set for thecircle
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