Detect When bubble is Loading Data

Need help
1

I’m working on a page for an app that relies on all data being loaded and presented to the user before allowing the user to proceed. I’m adding conditions to the proceed button to disable while data is loading, but I’m running into situations with large amounts of data where these conditions aren’t reliable. What I’ve tried:

-Repeatingroup is loading: This works on some browsers, but for others and/or with large amounts of data, this doesn’t translate to the data being displayed. Furthermore, this won’t work for nested repeatinggroups, since you can’t reference the inner repeatinggroup(s) from outside the outer repeattingroup.

-Page loaded entirely: This works well, but only once. My page allows the user to change settings on the page, resulting in different data being loaded. Once “page loaded entirely” is set to “yes”, it is never set to “no” again. The same problem occurs if data changes while the user is on the page.

So has anyone figured out a way to reliably tell if bubble is loading data? Essentially a “page data is loading” condition, like “page loaded entirely” but repeatable? I’m happy to get “hacky” with it if need be, e.g. hooking into javascript, I just need a reliable way of locking down my proceed button while data is loading.

2

Try with the following JS. It comes from a ChatGPT search but it looks promising to me. It seems to place some code in the middle of any fetch that your page does. It might even overtrigger…

const originalFetch = window.fetch;
window.fetch = async (...args) => {
    console.log('Data is being loaded...');
    const response = await originalFetch(...args);
    console.log('Data load complete');
    return response;
};

You can place functions to execute before and after the load is done. These functions invoke Bubble events (do it with the Toolbox plugin). You can use these events to control when your button is clickable.

1 Like
3

If you don’t need live data you could use a custom event or backend workflow to return your search results.

I used this method for quite some time on a dashboard to good effect (admittedly only with backend since return from custom events didn’t exist then), toggling a “loading” page state before/after the data is returned.

4

Thanks, this was super helpful. I’m marking it as the solution because it put me on the right track, but I had to tweak it to get it to actually work.

The main problem is that bubble doesn’t actually seem to use fetch all that often. So in order to get it work with loading data and images, I had to do the same thing, but overwriting xhr. Combining this with the Toolbox plugin’s “Javascript to bubble” produced the result I needed:

window.dataloadcount = 0;
const originalFetch = window.fetch;
window.fetch = async (...args) => {
    window.dataloadcount++;
    if(typeof bubble_fn_load_count === "function") {
        bubble_fn_load_count(window.dataloadcount);
    }
    const response = await originalFetch(...args);
    window.dataloadcount--;
    if(typeof bubble_fn_load_count === "function") {
        bubble_fn_load_count(window.dataloadcount);
    }
    return response;
};

const originalSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(body) {
    window.dataloadcount++;
    if(typeof bubble_fn_load_count === "function") {
        bubble_fn_load_count(window.dataloadcount);
    }
    this.addEventListener('loadend', function() {
        window.dataloadcount--;
        if(typeof bubble_fn_load_count === "function") {
            bubble_fn_load_count(window.dataloadcount);
        }
	});
	originalSend.apply(this, arguments);
};

The line:

if(typeof bubble_fn_load_count === "function") {

is so that it won’t throw an error prior to the javascripttobubble element being loaded.

Then it’s simply a matter of using a condition using the value of the javascripttobubble element:

image
image331×215 3.05 KB

I used this in tandem with the other loading functonality bubble provides, such as “Page loaded entirely” and a repeatinggroup’s “is loading” to ensure full coverage, just in case.

Also of note: This won’t track if the data is shown in elements, just if it has been loaded from the server. Since data loading from the page is typically the longest part, this will usually work. If you need to be sure, ChatGPT also suggested using Mutation Observers on the elements in questions.