AJAX loader: Custom Animation with Html & Css

Feature Requests / Improvements
1

Hi bricks team,

There is a feature request on the idea board for Ajax loader that somewhat addresses the current limitation on animation selection.

But it would be much better if we can create completely custom animation in AJAX loader using Html & Css. Because there would be no limitations.

1 Like
2

Hi @HOSEIN ,

Not sure if Query AJAX loader (Start) and (End) can fulfill your needs? (Disable the AJAX loader on the query or ajax popup)

You can build your own custom loader follow your structure and hide it in somewhere. Then use this interaction to display or hide the loader when necessary.

Regards,
Jenn

3

Hi @itchycode,

Thanks for the reply and sorry for the delay.

Yes, I first tried to achieve the desired result using the code element. But for several reasons the default query loop ajax loaders seem more suitable.

The most important reason is that native ajax loader does not render in DOM after page load. But this is not the case in custom ajax loader. For example, here the search box below uses native ajax loader. After the page loads, we see the number of DOM or search boxes.

ajax loader
ajax loader1918×698 23.7 KB

honestly I’m not sure if this feature request makes sense in terms of coding and implementation. But I think it would be great if there was a way to create custom animations alongside native animations. Then, like other native animations, we can use CSS selector to display the custom animation at the desired location.

Custom animation
Custom animation1547×868 45.5 KB

1 Like
4

Alright, understand what you mean now. :+1:
Yes, the native AJAX loader is using JS to insert the loading HTML dynamically.

1 Like
5

+1
I was looking for something like this too. Being limited to a few animations is not fun. I hope the bricks team will consider implementing this feature.

6

Hi @itchycode

This is great. But the search results section doesn’t seem to load dynamically. Even if the user doesn’t perform a search, there is an empty search results div in the HTML structure. It would be great and logical if the search results div was rendered in HTML after the user types a search term.

live search
live search1464×203 9.69 KB

There is also a live link here.

Is this a bug or could it be a feature request?

Best regards

7

Note: Query Loop AJAX Loader animation set to none.

// insert AJAX loader style to <head>, you may enqueue this style instead, is up to you
const style = document.createElement('style');
style.textContent = `.blockUI.blockOverlay:before {animation: spin 1sease -in-out infinite;background: url(/wp-content/plugins/woocommerce/assets/images/icons/loader.svg) 50%;background-size: auto;background-size: cover;color: rgba(0, 0, 0, .75);content: "";display: block;font-size: 2em;height: 1em;left: 50%;line-height: 1;margin-left: -.5em;margin-top: -.5em;position: absolute;text-align: center;top: 50%;width: 1em;}`;
document.head.appendChild(style);

// element that trigger AJAX
const triggerElement = document.getElementById('something');
const targetWrapper = document.getElementById('something');

// Custom AJAX loader, you may use your own cutom html & css
const loader = document.createElement("div");
loader.innerHTML = '<div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background: rgb(255, 255, 255); opacity: 0.6; cursor: default; position: absolute;"></div>';

// append the AJAX loader to targetWrapper
triggerElement?.addEventListener('click', () => {
    if (!targetWrapper.querySelector('.blockUI.blockOverlay')) {
        targetWrapper.appendChild(loader.firstElementChild.cloneNode(true));
    }
});

/*
 * it depends where you append the loader,
 * if it appended inside the Query Ajax loop element, 
 * it should overwrite by Bricks AJAX response, 
 * so you don't need to delete the loader.
 *
 * below is just an example how to remove the loader. 
 * You can listen to the [Bricks JS Events](https://academy.bricksbuilder.io/article/custom-javascript-events-in-bricks/) 
 * or your own AJAX complete response.
 */

document.addEventListener('bricks/ajax/query_result/completed', (event) => {
    const queryId = event.detail.queryId;
    if ( queryId === 'TARGET QUERY ID' ) {
        const ajaxLoader = document.querySelector('.blockUI.blockOverlay');
        ajaxLoader?.remove();
    }
});