I'm trying to implement react-loading-skeleton library in my project.
Code of skeleton component:
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
const MySkeleton: FC = () => {
return (
<SkeletonTheme baseColor="#000" highlightColor="#444" width={200} height={200}>
<Skeleton circle={true}/>
</SkeletonTheme>
)
}
export default MySkeleton
Code of webpack config:
...
{
test: /\.(scss|css)$/,
//exclude: /node_modules/, => needed to avoid for react-skeleton-loading work
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName:
'[name]__[local]--[hash:base64:5]',
},
},
},
'sass-loader',
],
},
...
Problem: skeleton component is rendered (it's showed in the DOM) but there is no sign of it on the screen. Two spans (one inside another - Skeleton component) rendered in the DOM, but styles (not from SkeletonTheme nor Skeleton) are used on it. DOM shows that styles are used on the element but I cannot see it on the screen.
P.S: I tried to use style property inside Skeleton and SkeletonTheme components - didn't work
In my case some of the code in webpack config doesn't let skeleton.css file to be uploaded on the webpage. So you need to comment or remove these lines:
...
options: {
modules: {
localIdentName:
'[name]__[local]--[hash:base64:5]',
},
},
...