Geek asks and answers

How to display my interface only after initializing my application?

I have a Dart + Web UI application that first needs to download data from the local IndexedDB store. The IndexedDB API is asynchronous, so I get a callback when my data loads. I do not want to display the interface elements until my database is open and ready.

How can I wait for my database to initialize before displaying my interface?

+5
source share
2 answers

I do this in my project via the web interface:

...
<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 also has an added bonus: individual code / website components can also check the status of the application before relying on a db connection, etc.

+5

body visibility:hidden:

<body style="visibility:hidden">
  <!-- content -->
</body>

, ()

window.indexedDB.open(dbName, 
  version: version, 
  onUpgradeNeeded: createObjectStore).then(handleDBOpened);

handleDBOpened(..) {
  query('body').style.visibility = "visible"; // <-- show the body tag
}
+3

More articles:


All Articles