diff --git a/doc/utils.md b/doc/utils.md
index 49fce255..6ce875cb 100644
--- a/doc/utils.md
+++ b/doc/utils.md
@@ -13,14 +13,23 @@ functions are all available in the `owl.utils` namespace.
 
 ## `whenReady`
 
-The function `whenReady` is useful to register some code that need to be executed
-as soon as the document (page) is ready:
+The function `whenReady` returns a `Promise` resolved when the DOM is ready (if
+not ready yet, resolved directly otherwise). If called with a callback as
+argument, it executes it as soon as the DOM ready (or directly).
+
+```js
+Promise.all([loadTemplates(), owl.utils.whenReady()]).then(function ([templates]) {
+    const qweb = new owl.QWeb(templates);
+    const app = new App({ qweb });
+    app.mount(document.body);
+});
+```
 
 ```js
 owl.utils.whenReady(function() {
-  const qweb = new owl.QWeb();
-  const app = new App({ qweb });
-  app.mount(document.body);
+    const qweb = new owl.QWeb();
+    const app = new App({ qweb });
+    app.mount(document.body);
 });
 ```
 
diff --git a/src/utils.ts b/src/utils.ts
index 0ac0da7f..f2eeec98 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -11,11 +11,13 @@
  */
 
 export function whenReady(fn) {
-  if (document.readyState !== "loading") {
-    fn();
-  } else {
-    document.addEventListener("DOMContentLoaded", fn, false);
-  }
+  return new Promise(function(resolve) {
+    if (document.readyState !== "loading") {
+      resolve();
+    } else {
+      document.addEventListener("DOMContentLoaded", resolve, false);
+    }
+  }).then(fn || function () {});
 }
 
 const loadedScripts: { [key: string]: Promise<void> } = {};
diff --git a/tools/playground/app.js b/tools/playground/app.js
index c48c7d5a..af72f96d 100644
--- a/tools/playground/app.js
+++ b/tools/playground/app.js
@@ -127,22 +127,22 @@ async function makeApp(js, css, xml) {
     .map(l => (l === "" ? "" : "  " + l))
     .join("\n");
 
-  const JS = `async function startApp() {
-  // Loading templates
-  let TEMPLATES;
+  const JS = `
+async function loadTemplates() {
   try {
-    TEMPLATES = await owl.utils.loadTemplates('app.xml');
+    return owl.utils.loadTemplates('app.xml');
   } catch(e) {
-    document.write(\`This app requires a static server.  If you have python installed, try 'python app.py'\`);
-    return;
+    console.error(\`This app requires a static server.  If you have python installed, try 'python app.py'\`);
   }
+}
 
+function start([TEMPLATES]) {
   // Application code
 ${processedJS}
 }
 
-// wait for DOM ready before starting
-owl.utils.whenReady(startApp);`;
+Promise.all([loadTemplates(), owl.utils.whenReady()]).then(start);
+`;
 
   zip.file("app.js", JS);
   zip.file("app.css", css);
@@ -354,13 +354,13 @@ class TabbedEditor extends owl.Component {
 //------------------------------------------------------------------------------
 async function start() {
   document.title = `${document.title} (v${owl.__info__.version})`;
-  const templates = await owl.utils.loadTemplates("templates.xml");
+  const [templates] = await Promise.all([
+    owl.utils.loadTemplates("templates.xml"),
+    owl.utils.whenReady()
+  ]);
   const qweb = new owl.QWeb(templates);
-  const env = { qweb };
-  owl.utils.whenReady(() => {
-    const app = new App(env);
-    app.mount(document.body);
-  });
+  const app = new App({ qweb });
+  app.mount(document.body);
 }
 
 start();