General Question About Figure Loading Times

Dash Python
15

Hmm, ok.

Try separating your figures loading into a callback instead of the layout loading.

Once you do that, test the speed, if it still isnt improved, you are welcome to try this in a js file:

const CACHE = "pages_cache";

const { fetch: originalFetch } = window;

const stored_data = {};

function updateCache(request, response) {
    if (window.location.href.substr(0,4).toLowerCase() == 'https' || window.location.href.includes('127.0.0.1')) {
        caches.open(CACHE).then(function (cache) {
        cache.put(request, response);
        });
    } else {
        stored_data[request] = response
    }
}

async function testCache(url, that, args, cache_loc = CACHE) {
    var cachedResponse;
    if (window.location.href.substr(0,4).toLowerCase() == 'https' || window.location.href.includes('127.0.0.1')) {
        const cache = await caches.open(cache_loc)
        cachedResponse = await cache.match(url)
    } else {
        cachedResponse = stored_data[url]
    }

    // Return a cached response if we have one
    if (cachedResponse) {
        savedResponse = cachedResponse.clone()
        return savedResponse;
    }

    const result = originalFetch(that, args);

    result.then((response) => {
        if (response.ok) {
            updateCache(url, response.clone())
        }
    })
    return result
}

window.fetch = async (event, payload) => {
    var result;
    // store all pages
    if (event == '/_dash-update-component') {
        data = payload.body
        if (data.includes('_pages_store')) {
            loc = JSON.parse(data)['inputs'][0].value.toLowerCase()
            result = await testCache(loc, event, payload)
        }
    }

    if (!result) {
        result = originalFetch(event, payload)
    }

    return result
}


// sets up process for pre-loading page layouts
async function fetchHandler (url) {
    var cachedResponse;
    if (window.location.href.substr(0,4).toLowerCase() == 'https' || window.location.href.includes('127.0.0.1')) {
        const cache = await caches.open(CACHE)
        cachedResponse = await cache.match(url)
    } else {
        cachedResponse = stored_data[url]
    }

    if (!cachedResponse) {
        payload = {"output":".._pages_content.children..._pages_store.data..",
        "outputs":[{"id":"_pages_content","property":"children"},
        {"id":"_pages_store","property":"data"}],
        "inputs":[{"id":"_pages_location","property":"pathname","value": url.toLowerCase()},
        {"id":"_pages_location","property":"search","value":""}],
        "changedPropIds":["_pages_location.pathname","_pages_location.search"]}

        args = {
            "credentials": "same-origin",
            "headers": {
                "Accept": "application/json",
                "Content-Type": "application/json"
            },
            "method": "POST",
            "body": JSON.stringify(payload)
            }
            const result = originalFetch('../_dash-update-component', args);

            result.then((response) => {
                if (response.ok) {
                    updateCache(url.toLowerCase(), response.clone())
                }
        })
    }
}

async function preloadPages (preload) {
    for (y=0; y<preload.length; y++) {
        const url = preload[y]
        setTimeout(function () {fetchHandler(url)}, y*5000)
    }
}

// preloading layouts
preloadPages(['./test_page'])

Only use this if you can separate your dynamic loading data from your page’s layout.