Skeleton Loading (with Lazy Loading)

Feature Requests / Improvements
1

It would be great to have skeleton loading in place of elements that have lazy loading.

Thrive Themes have added this to their lazy loading features lately and it stops the UX from shifting (as it currently does with Bricks)

This would create a skeleton placeholder for images and videos.

Is it possible to do this via a JS script right now or does this need to be built into Bricks directly?

Thanks builders! :pray:

8 Likes
2

Hey @Deanphillips

If you mean whilst creating a site why not just simply turn it off in Bricks settings >performance (i think). Then you won’t face that issue. When you have done your build, then switch it back on. :+1:

3

Thanks for the reply @Michael! The issue it with the build itself.

If you scroll through any bricks site which has lazy loading on (which we do want to reduce page load times) there’s CLS happening.

For this to have less of an effect, skeleton loading (placeholder container blocks which have a fixed size) + lazy loading would be the best of both worlds.

We’d get faster page speeds and a better user experience in general (as content won’t be shifting on scroll)

2 Likes
4

Ah i got you @Deanphillips + thanks for the vid. To be fair Its one of the only things I am not a fan of in Bricks and that is the lazy loading. For live sites I always off-load this to Litespeed or Ewww depending on the build and best results. Maybe this is better off/more success as a feature improvement thread?

5

I think that this option we have in litespeed cache plugin where is possible to replace images with placeholders.

image
image1520×246 23.9 KB

Mobile applications use something like that not only for images but also for elements.

4 Likes
6

Never knew this was a feature in Litespeed cache, thanks for the tip!

7

Ditto this feature request. That would be great to be added.

1 Like
8

There have been many requests on the forum and idea board for a loading animation for a better frontend UX. Few mention skeletons, likely because the term is less familiar. But if Bricks plans to add a loader, skeleton loaders are a far more effective and modern approach — especially in Query Loops, where AJAX queries can cause noticeable delays.

I’ve noticed that WooCommerce already uses skeleton loaders in the Dashboard — for example, in the Analytics section or Payment settings. After investigating, I found this simple approach that works great:

<div class="image-wrapper">
  <div class="skeleton"></div>
  <img src="image.jpg" loading="lazy" onload="this.previousElementSibling.remove()">
</div>

//CSS

.image-wrapper .skeleton {
  position: absolute;
  inset: 0;
  background: #ddd;
  animation: pulse 1.5s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

The key part here is:

onload=“this.previousElementSibling.remove()”

:arrow_right: No need for JS frameworks or skeleton libraries.
:arrow_right: No need for cache plugin tricks like in LiteSpeed.
:arrow_right: Pure CSS + native HTML event.

:bulb: Feature Suggestion for Bricks:

Bricks could add a native skeleton class option to basic elements (Image, Text, Container, etc.). This class would:

  • Display a skeleton animation while content is loading.
  • Disappear once the content is rendered.
  • Help mitigate CLS in query loops or dynamic grids.
  • Improve perceived performance without complex workarounds.

This would be a lightweight and elegant solution fully aligned with Bricks’ philosophy.

1 Like
9

Follow-up:
WooCommerce applies the same skeleton loading approach not just for images, but also for text blocks and UI placeholders in the admin (like in the Payments or Reports sections). It’s done via React, but the principle is simple and adaptable to Bricks with native elements:

<div class="skeleton-text"></div>
<div class="real-text" style="display:none;">Actual content here</div>

And once your content is ready (via fetch, Bricks query loop, etc.):

//JS
document.querySelector('.skeleton-text').remove();
document.querySelector('.real-text').style.display = 'block';

This replicates the WooCommerce technique without needing React.

A native Bricks feature to apply .skeleton classes to Text or Container elements would make this pattern easy and reusable.

2 Likes