Change background color from index.html so there's no white when the page refresh

Universal Dashboard Universal Dashboard Help
1

There’s a small moment when loading the dashboard that a white square appear.
How do I get rid of that ?

I tried changing body / app div / nav-box and nav-wrap color to red but there’s still a central white square that I am unable to get rid of.

The ultimate is to get all that background the same color of my dashboard theme for “non-flashy” refresh.

In previous version, setting the body bgcolor of client/index.html was sufficient.
This trick appear to not work anymore.

See attached GIF

whitethingy
whitethingy.gif1908×955 60.5 KB

2

While I’d like to be able to find a resolution using pure css, I ended up doing the following :

In client/index.html, I set the body background color to #3333333
<body bgcolor="#333333">

and the app div visiblity to “hidden”
<div id="app" class="app" style="visibility: hidden" />

Then I added a script section (still in index.html) to show the login form after 250 ms.

  <script type="text/javascript">

        function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        async function ShowLogin() {
            if (window.location.pathname == '/login') {
                await sleep(250);

                document.getElementById("app").style.visibility = "visible";

            }
        }
        ShowLogin();
    </script>

Finally, I added a javascript file that load through New-UDDashboard with the following line:
document.getElementById("app").style.visibility = "visible";

The distinction between the script in the index.html and the script that get loaded as a JS endpoint is this :

  • Js endpoint load only when the dashboard has applied the theme (past the white frame) but does not load on the login page.
  • Index.html script is time based (250 ms) which mitigate the white frame on the login page.
    Since it is time based and could reveal not accurate at time (also we don’t want to wait such a long time if not needed), it is applied only on the login page.

Something happens within the app div at loading time that is set to a white color.
It looks like UD overrides the app background color to white before applying UD theme so I don’t think there’s a easier way to perform that.

1 Like