A Bare-Bones Approach to Versatile and Reusable Skeleton Loaders

Effective loading indicators, like spinners and skeleton loaders, significantly improve the user experience during page load times. While spinners are simple to implement, skeleton loaders, though potentially more complex, offer a superior experience in specific scenarios. Many existing skeleton loader implementations lack reusability and scalability, often being tailored to single components. This article presents a more efficient, reusable, and scalable approach.

Spinners vs. Skeleton Loaders

Spinners (or progress bars) are the most common loading indicators, providing a visual cue that loading is in progress. However, they offer limited engagement; users passively wait, unable to interact with other page elements. Skeleton loaders (or skeleton screens), conversely, provide a more active waiting experience. They use placeholders (colored boxes) representing the eventual content, offering a sense of progress and perceived faster loading.

Crucially, loading components shouldn't mask underlying performance issues. Optimize assets and backend processes first; loading elements are a last resort when delays are unavoidable and not due to fixable performance problems.

Effective Use of Skeleton Loaders

Skeleton loaders shouldn't replace full-screen loaders but are best used under specific conditions:

Avoidable Delays?

Prioritize performance optimization to minimize loading delays. Skeleton loaders are only suitable when delays are truly unavoidable.

User-Initiated Loading?

For user actions triggering loading (e.g., lazy-loading images), provide feedback with a loading element. Without it, users are unaware of background processes.

Consistent and Predictable Layout?

Skeleton loaders work best with predictable content layouts. If the skeleton doesn't closely resemble the final layout, the sudden change can be jarring.

Immediately Available Content?

Skeleton loaders are most effective when some content is immediately visible while others load asynchronously. This maintains a sense of progress. A screen filled solely with skeleton loaders without any initial content isn't significantly better than a full-screen spinner.

Building Robust Skeleton Loaders

Many skeleton loader examples are over-engineered. This article advocates a minimalist approach for easy implementation, reuse, and maintenance.

Card Grid Example

Using HTML, CSS, and JavaScript, a simple grid of six cards will demonstrate asynchronous loading. Each card uses a placeholder image (<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="A Bare-Bones Approach to Versatile and Reusable Skeleton Loaders ">) to ensure the skeleton is visible until the image loads.

Skeleton Loader Styles

Instead of creating separate skeleton components, leverage existing layout styles. The following CSS activates skeleton styles when the .loading parent class is present:

.loading .loading-item {
  background: #949494 !important; /* Customizable skeleton loader color */
  color: rgba(0, 0, 0, 0) !important;
  border-color: rgba(0, 0, 0, 0) !important;
  user-select: none;
  cursor: wait;
}

.loading .loading-item * {
  visibility: hidden !important;
}

.loading .loading-item:empty::after,
.loading .loading-item *:empty::after {
  content: "\00a0";
}

This approach inherits the layout from the main component styles, replacing content with solid boxes. The .loading-item class ensures layout preservation.

Multi-line Content and Layout Shifts

To address layout shifts caused by varying content lengths, use <br> tags within the placeholder elements to simulate multiple lines. This inherits relevant CSS properties for accurate sizing.

Accessibility Considerations

Accessibility is crucial.

Contrast

High-contrast skeleton loaders are recommended for better visibility, adhering to WCAG guidelines. The prefers-contrast media query (when widely supported) can offer further customization.

Animations

Respect user preferences for reduced motion using the prefers-reduced-motion media query to disable animations when necessary.

Screen Readers

Use ARIA attributes like aria-hidden and visually hidden text to provide context for screen readers. For example: <div> <span style="display:none;">Loading...</span><img aria-hidden="true" ... alt="A Bare-Bones Approach to Versatile and Reusable Skeleton Loaders" > </div>.

Conclusion

This minimalist approach creates versatile, reusable skeleton loaders that inherit layout from existing styles, replacing only the content. This improves maintainability and scalability. Prioritizing accessibility ensures inclusivity for all users.

The above is the detailed content of A Bare-Bones Approach to Versatile and Reusable Skeleton Loaders. For more information, please follow other related articles on the PHP Chinese website!