How to implement React-loading-skeleton properly?

Question

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

Answer 1

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]',
                },
            },
...