Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

523
Visualizações
How to implement React-loading-skeleton properly?

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

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda