Custom loading screen for slow loading app?

[dskarbrevik]

I have an app that has 200 small images each with a unique callback. I created these thanks to a tip from @chriddyp here.
Unfortunately this makes my app take about 10-15 seconds to initially load. If there is a solution to loading an app faster when you have a lot of callbacks I'd love to hear it.

If not, I'm interested in displaying a custom page or message while the app is loading. Currently, it simply says "loading..." in the top left corner of the window. I would at least like to tell the user that it will take a few seconds to load the page. Is this possible?

[chriddyp]

I believe that you have two options:

• In Assets files & index customizations #286, you'll be able to override the initial "index" that makes it easier to provide a different initial view
• Alternatively, you could provide CSS that targets the _dash-loading class from here:

  dash/dash/dash.py

  Lines 308 to 310 in f309cc2

  	<div class="_dash-loading">
  	Loading...
  	</div>

  . Getting the local CSS to load is going to be easiest if you wait for Assets files & index customizations #286 to land

[chriddyp]

#286 has landed! Official docs here: dash.plot.ly/external-resources

[SuperCuber]

@chriddyp Hey, changing the css works when added in assets but how would I go about changing the contents of the div? Say, for example, I want an image/gif.

I tried this javascript but it doesn't change it in time:

function onElementInserted(containerSelector, elementClass, callback) {
    var onMutationsObserved = function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                for (element of mutation.addedNodes) {
                    if(element.classList !== undefined && element.classList.contains(elementClass)) {
                        callback(element);
                    }
                }
            }
        });
    };

    var target = document.querySelector(containerSelector);
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MutationObserver(onMutationsObserved);
    var config = { childList: true, subtree: true };
    observer.observe(target, config);

}

onElementInserted('body', '_dash-loading', element => {
    console.log(element);
    element.innerHTML = "Testerino!";
});

[maltegrosse]

i did some workaround based on your snipped @SuperCuber
first I added in the asset/mystyle.css file following:
._dash-loading{ visibility:hidden; }
then using your code, I added element.style.visibility = "visible";
and added multiple html elements by using var div = document.createElement("DIV"); and finall element.appendChild(div)

I am just not sure how long it takes until the custom js is loaded, hopefully its only relative small delay until the main workload is loading - and not execute a second before everything else is already loaded.
Perhaps @chriddyp has some information about the initial loading process ?