How do I display my UI only after my app is initialized?

Question

I have a Dart + Web UI app that first needs to load data from the local IndexedDB store. The IndexedDB API is asynchronous, so I will get a callback when my data is loaded. I do not want to display any UI elements until my database is first opened and ready to go.

How can I wait for my database initialization before I display my UI?

Kai Sellgren · Accepted Answer · 2013-06-23T13:29:15.397

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.

Chris Buckett · Answer 2 · 2013-02-12T11:10:14.203

3

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
}

edited Feb 12 '13 at 11:10

answered Feb 12 '13 at 08:51

Chris Buckett

13,738
5
39
46

1

This doesn't always matter, but one subtle difference between using visibility (this answer) and using a template-if (Kai's answer) is that anything inside the template-if is not evaluated when the condition is false, so if you have: `` vs ` – Siggi Cherem Feb 12 '13 at 17:12

How do I display my UI only after my app is initialized?

2 Answers2