Releases: dvtng/react-loading-skeleton
Releases · dvtng/react-loading-skeleton
3.0.1
3.0.0
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
SkeletonThemeusing React context- The old
SkeletonThemerendered a<div>which was undesirable in many
cases. The newSkeletonThemedoes not render any DOM elements. - The old
SkeletonThemedid not work if theSkeletonwas rendered in a
portal. The newSkeletonThemedoes work in this case.
- The old
SkeletonTheme: rename thecolorprop 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
directionprop to support right-to-left animation - Add
enableAnimationprop to allow disabling the animation - Add
containerClassNameprop to allow customizing the container element - Add
containerTestIdto make testing easier - Add
aria-liveandaria-busyattributes to the skeleton container to
improve screen reader support
Other Changes
- Optimize animation performance:
- The old animation animated the
background-positionproperty which made
the browser repaint the gradient on every frame. - The new animation animates the
transformof a pseudoelement. This
avoids repaints and results in an observable decrease in CPU usage.
- The old animation animated the
- No longer require
widthandheightto be set for thecircleprop to
work - Change the default
durationfrom 1.2 s to 1.5 s - Make the default
Skeletonbase 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
widthprop - Fix the type of the
wrapperprop in the type definitions