Skeleton Loading, Skeleton Loader… Melhorando a fluidez de suas aplicações

Skeleton Loading (ou Loader) é um elemento visual com o qual já estamos bem habituados.

Sabe quando uma publicação ainda está carregando e aparecem barrinhas em branco indicando esse carregamento? Elas estão ali justamente pra dar uma sensação de fluidez e não deixar o usuário sem rumo olhando pra uma tela vazia até que esse carregamento seja concluído. Dessa forma, servem como um indicador visual claro pra esse processo que pode ser, por exemplo, uma requisição à uma API (que sabemos que às vezes demora mais que o planejado 😂).

Skeleton na prática

Nesse artigo, vou abordar uma das diversas formas de utilização do Skeleton Loader, por meio de uma lib bem famosinha e você verá que é tão simples de usar que nunca mais deixará seu usuário encarando uma tela em branco de novo.

Aqui, estarei utilizando React e a biblioteca react-loading-skeleton (oh, jura?). Para isso, começamos instalando nossa lib:

O próximo passo aqui é importarmos o { SkeletonTheme } em seu app a fim de facilitar a personalização. Ele envolve a aplicação da mesma forma que o context, BrowserRouter e outras importações com as quais já estamos acostumados.

Fazendo isso, já se torna possível definir algumas propriedades logo de cara. Coloquei um tom para baseColor, que é a cor das barrinhas de carregamento e um tom mais claro pra highlightColor, que é a ‘luz’ que passa sobre o elemento dando aquela sensação de carregamento.

Em seguida, criamos um componente que será de fato o esqueleto de algum elemento de nossa aplicação. No exemplo eu fiz para alguns cards de um blog. É ideal retorná-lo na forma de um array, passar um .map() e fazê-lo receber por meio de props a quantidade de cards a serem renderizados. Com classes e estilização CSS básica, criamos um esqueleto que seja fiel ao elemento original.

Já dentro do componente que receberá o esqueleto, importamos o .css do react-loading-skeleton, juntamente do próprio esqueleto que montamos acima.

Por fim, chamamos o esqueleto em uma renderização condicional atrelada ao estado de carregamento da requisição. Aqui eu usei o famoso [loading, setLoading]. Lembra que nosso esqueleto recebeu uma prop referente ao número de cards que ele vai exibir? É justamente aqui que passamos essa prop.

E o resultado, conforme vocês viram em um exemplo lá em cima, é essa lindeza aqui:

Nesse, fiz dois esqueletos distintos: um para o post de cima e outro para os comentários abaixo dele

Por fim…

Como vimos, é bem tranquilo implementar essa feature, além de deixar sua aplicação visualmente mais agradável e levar mais fluidez à experiência do usuário.

Vale notar que há algumas ressalvas sobre a implementação. Minha recomendação é que deixe pra fazer apenas ao final do projeto, por motivos óbvios: imagina fazer o esqueleto de um componente que vai ser posteriormente modificado visualmente? Além de perder tempo, você vai ter que fazer novamente o design de seus esqueletos.

Entretanto, mesmo com esse trabalhinho a mais, é inegável que essa ferramenta traz uma cara muito mais profissional e adiciona uma camadinha de desenvoltura pro seu projeto. É isso, galera! Vejo vocês em breve!