Login/Register
How do I display my UI only after my app is initialized?
Asked Answered
Solved dartdart-webui
R

2

5

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?

Rashad answered 12/2, 2013 at 4:55 Comment(0)
L
5

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.

Leucoplast answered 12/2, 2013 at 11:26 Comment(0)
N
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
}
Necropolis answered 12/2, 2013 at 8:51 Comment(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: <div hidden>{{x.foo}}</div> vs <template instantiate="if x != null"><div>{{x.foo}}</div>, then the template-if will prevent that a null dereference, but the visibility-hidden approach wont. – Vladimir

© 2022 - 2024 — McMap. All rights reserved.