Introduction

Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using React Context.

Ideology

Modern applications often use skeleton screens to enhance user experience during data loading. However, managing these screens manually can be time-consuming and repetitive. When the UI changes, the skeleton must also be updated to avoid UI mismatches.

Current libraries require developers to handle the skeleton loading logic in multiple places. For instance, if you have a card with a title and a description, you'll need to implement the skeleton rendering logic twice. This is frustrating and compromises the overall developer experience.

So, many developers end up just using spinners which pisses the CEOs and clients.

The goal is to make skeletons a fundamental feature of applications instead of a time-consuming task by solving the above problems. The developers should focus on building features rather than managing loading states.

Features

Skel UI at the Base Layer

Implement skeleton at the base layer of your application (e.g., buttons, chips, and avatars). It will render a real UI by default. However, when wrapped inside Root, it will render skeleton.

<Button label="Press Me" />

<Skel.Root>
  <Button label="Press Me" />
</Skel.Root>

export default function Button({ label, ...rest }) {
  return (
    <Skel.button {...rest}>
      {label}
    </Skel.button>
  );
}

Comparision

This section provides unbiased information about Skel UI compared to React Loading Skeleton. If you have suggestions for improvement, please share your notes or evidence using the "Edit on GitHub" link at the bottom.

Code overview

<div>
  <h1>
    {isLoading ? <Skeleton /> : post?.title}
  </h1>
  {isLoading ? (
    <Skeleton count={4} />
  ) : (
    <p>{post?.body}</p>
  )}
  {isLoading ? (
    <Skeleton height={40} />
  ) : (
    <Button label="Like" />
  )}
</div>

<div>
  <Skel.Root isLoading={isLoading}>
    <Skel.h1>{post?.title}</Skel.h1>
    <Skel.p>{post?.body}</Skel.p>
    <Button label="Like" />
  </Skel.Root>
</div>;

Features

Next step

Select the platform where you would like to implement Skel UI.