Non-blocking fetch

index.hbs

@@ -3,14 +3,11 @@
 <div id="index-placeholder"></div>
 
 <script>
-    (async () => {
-        const response = await fetch('index.md');
-        const text = await response.text();
-        const script = document.getElementById('helpers');
-        script.addEventListener('load', () => {
-            transformMarkdownAndReplaceId(text, 'index-placeholder');
-        });
-    })();
+    const responsePromise = fetch('index.md');
+    const script = document.getElementById('helpers');
+    script.addEventListener('load', () => {
+        transformMarkdownAndReplaceId(responsePromise, 'index-placeholder');
+    });
 </script>
 
 {{> partials/footer}}

lib/helpers.js

@@ -22,11 +22,13 @@ const replaceWithContent = (element) => {
 }
 
 /**
- * Replaces an element in the DOM with the HTML obtaining by transforming given markdown
- * @param {string} text Markdown
+ * Replaces an element in the DOM with the HTML obtaining by transforming markdown resolved in the given Promise
+ * @param {Promise<Response>} responsePromise Promise resolving to markdown content
  * @param {string} id id of the element in DOM to replace
  */
-const transformMarkdownAndReplaceId = (text, id) => {
+const transformMarkdownAndReplaceId = async (responsePromise, id) => {
+    const response = await responsePromise;
+    const text = await response.text();
     const html = markdownToHtml(text);
     const toReplace = document.getElementById(id);
     toReplace.innerHTML = html;

news.hbs

@@ -8,14 +8,11 @@
 {{> partials/old_news}}
 
 <script>
-    (async () => {
-        const response = await fetch('news.md');
-        const text = await response.text();
-        const script = document.getElementById('helpers');
-        script.addEventListener('load', () => {
-            transformMarkdownAndReplaceId(text, 'news-placeholder');
-        });
-    })();
+    const responsePromise = fetch('news.md');
+    const script = document.getElementById('helpers');
+    script.addEventListener('load', () => {
+        transformMarkdownAndReplaceId(responsePromise, 'news-placeholder');
+    });
 </script>
 
 {{> partials/footer}}