WP GridBuilder Loading Animation on Query Block

How To
1

Hi All,

I’m filtering a WooCommerce Products Block with Facets from WP GridBuilder. It works but there’s no loading animation between when a Facet is selected and the query updates. So when somebody clicks a facet, there’s a brief pause where nothing happens and then the results are updated. Am I doing something wrong here? Is there a way to give the user some feedback while the query results are updated?

-=Chris

1 Like
2

Hi there, I just tried to use the native infinite scroll with wp grid builder (V2) and it works more or less, at least better than with the wpgb load more.
Cheers

3

Hi Chris, I’m dealing with the same issue. Have you found a way to add a loader/spinner or show/hide any element while WP Gridbuilder is filtering?

4

Same issue here, has anyone figured out a resolution?

5

I found a solution. Just posting if anyone needs in future.

Simply add this CSS to the page where your query loop & wpgb filter is. Obviously change the content URL with your own loader gif or icon URL, or emoji for example: :hourglass_flowing_sand:

.wpgb-enabled.wpgb-loading {
    position: relative;
}

.wpgb-enabled.wpgb-loading:after {
   content: url("/wp-content/uploads/2025/06/animation-loader-list300-60fps-v2.gif") / "Loading";
    position: absolute;
    left: 50%;
    top: 250px;
    transform: translate(-50%, -50%);
}

Original credits where I originally found the basis for this solution: How to use WP Grid Builder with Oxygen