How do I display my UI only after my app is initialized?
I am doing it in my project the Web UI way:
...<body> <template if="showApplication"> <span>The app is ready.</span> </template></body>...
@observable bool showApplication = false;main() { // Initialize... window.indexedDB.open(...).then((_) { showApplication = true; });}
This has also an added bonus: separate code / web components can also check the app state before relying on db connectivity, etc.
Hide the body
tag with visibility:hidden
:
<body style="visibility:hidden"> <!-- content --></body>
And then show it in your future's then() callback
window.indexedDB.open(dbName, version: version, onUpgradeNeeded: createObjectStore).then(handleDBOpened);handleDBOpened(..) { query('body').style.visibility = "visible"; // <-- show the body tag}