Overview of the Phoenix and LiveView Skeleton Component

The Mishka Chelekom skeleton component is a Phoenix LiveView component that allows developers to display skeleton loaders as placeholders for content that is being loaded or processed. This visual cue improves the user experience by indicating that data or elements are being fetched, ensuring a more responsive interface. The component supports customization of size, color, and shape, allowing for seamless integration with the overall design.

This Phoenix LiveView component enables developers to easily tailor the skeleton loader's appearance using props for size, border radius, and color. With options like animated pulse effects and fully responsive design, the skeleton component enhances the perceived performance of your application, making it more engaging and user-friendly during asynchronous operations.

Color prop in Phoenix LiveView skeleton component

The color prop for the skeleton component provides several predefined color options to help you customize the visual appearance of the skeleton loader. You can choose from colors such as white , primary , secondary , dark , success , warning , danger , info , light , silver , misc , and dawn . These options allow you to seamlessly integrate the Phoenix skeleton component with the overall design of your application, ensuring a consistent and polished user interface during loading states.

<.skeleton color="white" />
<.skeleton color="primary" />
<.skeleton color="silver" />
<.skeleton color="secondary" />
<.skeleton color="dark" />
<.skeleton color="success" />
<.skeleton color="warning" />
<.skeleton color="danger" />
<.skeleton color="light" />
<.skeleton color="misc" />
<.skeleton color="info" />
<.skeleton color="dawn" />

Animated prop

The animated prop in the skeleton component adds a pulsating animation effect by applying the animate-pulse class from Tailwind CSS. This feature enhances the skeleton loader's visual feedback by making it more dynamic, simulating a loading state with smooth, repetitive animations. When animated is set to true, it gives users a clear indication that content is still being loaded, improving the overall user experience during data fetching or processing tasks. This small detail adds a polished, engaging look to your application's UI while waiting for content to load.

<.skeleton animated />

Visible prop

The visible attribute is a boolean prop that determines whether the skeleton component is displayed or hidden. By default, this attribute is set to true, meaning the skeleton will be visible. Setting it to false will hide the skeleton, allowing you to control the visibility of the component dynamically based on your application's state. This is particularly useful for conditionally showing loading indicators only when data is being fetched or processed.

<.skeleton visible />
<.skeleton visible={false} />

Height prop

The height prop in the skeleton component controls the vertical size of the skeleton element. It offers predefined values like extra_small , small , medium , large , and extra_large , which map to specific height classes in Tailwind CSS. These sizes allow you to adjust the skeleton's height to fit various content placeholders, making it flexible for different sections or components where a loading indicator is needed. Additionally, you can provide any custom Tailwind CSS class for height, such as h-[7px] , giving you full control over the skeleton's size to meet specific design requirements. This flexibility ensures that the skeleton component can adapt to various layout needs across your application.

<.skeleton height="extra_small" />
<.skeleton height="small" />
<.skeleton height="medium" />
<.skeleton height="large" />
<.skeleton height="extra_large" />
<.skeleton height="h-[0.54rem]" />
<.skeleton height="h-[2.5px]" />

Width prop

The width prop in the skeleton component controls the horizontal size of the skeleton element. It provides predefined values such as extra_small , small , medium , large , extra_large , and full , which correspond to Tailwind CSS width classes. These predefined sizes allow for easy adjustments to the width of the skeleton, making it suitable for different content sections, like text blocks or full-width elements. You can also specify any custom Tailwind class, such as w-[150px] , allowing you to define specific widths to match your application's design. This level of customization ensures that the skeleton component can adapt seamlessly to a wide range of layout needs.

<.skeleton width="extra_small" />
<.skeleton width="small" />
<.skeleton width="medium" />
<.skeleton width="large" />
<.skeleton width="extra_large" />
<.skeleton width="full" />
<.skeleton width="w-[201px]" />
<.skeleton width="w-[5.6rem]" />

Rounded prop

<.skeleton width="extra_small" />
<.skeleton width="small" />
<.skeleton width="medium" />
<.skeleton width="large" />
<.skeleton width="extra_large" />
<.skeleton width="full" />
<.skeleton width="none" />

How use skeleton component

The rounded prop in the skeleton component determines the border radius, or how rounded the edges of the skeleton loader appear. It offers a range of options including extra_small, small, medium, large, and extra_large to create varying levels of roundness. Additionally, the full option gives the skeleton completely rounded corners, often used for circular shapes, while the none option leaves the skeleton with sharp, square edges. This feature allows developers to customize the skeleton’s appearance to fit the design requirements of the application.

<div class="flex items-center gap-3 p-3 rounded-lg bg-indigo-800">
  <.skeleton width="w-14" height="h-14" color="light" class="shrink-0" rounded="full" animated/>
  <div class="space-y-2 flex-1">
    <.skeleton height="small" color="light" animated />
    <.skeleton height="small" width="w-32 md:w-96" color="light" animated />
    <.skeleton height="small" width="w-28 md:w-80" color="light" animated />
    <.skeleton height="small" width="w-24 md:w-72" color="light" animated />
  </div>
</div>