CARVIEW |
Select Language
HTTP/2 200
date: Wed, 23 Jul 2025 00:52:26 GMT
content-type: text/html; charset=utf-8
vary: X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, X-Requested-With,Accept-Encoding, Accept, X-Requested-With
etag: W/"df9f3e9edf2c3f83b7b1ce481780cf5c"
cache-control: max-age=0, private, must-revalidate
strict-transport-security: max-age=31536000; includeSubdomains; preload
x-frame-options: deny
x-content-type-options: nosniff
x-xss-protection: 0
referrer-policy: no-referrer-when-downgrade
content-security-policy: default-src 'none'; base-uri 'self'; child-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com *.rel.tunnels.api.visualstudio.com wss://*.rel.tunnels.api.visualstudio.com objects-origin.githubusercontent.com copilot-proxy.githubusercontent.com proxy.individual.githubcopilot.com proxy.business.githubcopilot.com proxy.enterprise.githubcopilot.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com api.githubcopilot.com api.individual.githubcopilot.com api.business.githubcopilot.com api.enterprise.githubcopilot.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: blob: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com private-avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com release-assets.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com copilotprodattachments.blob.core.windows.net/github-production-copilot-attachments/ github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/
server: github.com
content-encoding: gzip
accept-ranges: bytes
set-cookie: _gh_sess=liEvN9CharjkoM1l%2Fu64v68pLeMzLW7L57xVjQA2hbcNu%2Bnz5a41gRVwTOSRAzK7CsV1KGd1NSy2xt%2F8kZPrsOopu2DlzCB6JMPQri6bTPzbVwHQHXSr1sICkiYE78UgXFuA2txc1TBfR8g%2Fbqmwa8mA5VxIZ5hK3zUHHuumPxrBCLgXlvlJKK1Ynhj8EpLFR0fRi6A6mW2H3hIqIq7k4o8RRasR4OhzU0jJcOZmVhhGtBHnqf8MI3U2aMjNL3f%2F8P76kMUMsMYr17Dj3yC7PQ%3D%3D--zgHDtMWIW%2BVvW0o1--eXI%2FdUVIbpvcAFSbMQSiGw%3D%3D; Path=/; HttpOnly; Secure; SameSite=Lax
set-cookie: _octo=GH1.1.1283462657.1753231946; Path=/; Domain=github.com; Expires=Thu, 23 Jul 2026 00:52:26 GMT; Secure; SameSite=Lax
set-cookie: logged_in=no; Path=/; Domain=github.com; Expires=Thu, 23 Jul 2026 00:52:26 GMT; HttpOnly; Secure; SameSite=Lax
x-github-request-id: AC6C:256CA9:208731:2DB161:6880324A
Release 3.0.0 Β· dvtng/react-loading-skeleton Β· GitHub
Loading
Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 159
3.0.0
Compare
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
Thanks!
Assets 2
14 people reacted
You canβt perform that action at this time.