fix: add disqus comment counter after posts have loaded

OliverBooth/Pages/Blog/Index.cshtml

@@ -23,7 +23,7 @@
             {{#if post.enable_comments}}
                 <span> &bull; </span>
                 <a href="{{post.url}}#disqus_thread" data-disqus-identifier="{{post.disqus_identifier}}">
-                    0 Comments
+                    Loading comment count &hellip;
                 </a>
             {{/if}}
         </p>
@@ -39,5 +39,3 @@
         {{/if}}
     </div>
 </script>
-
-<script id="dsq-count-scr" src="https://oliverbooth-dev.disqus.com/count.js" async></script>

src/ts/UI.ts

@@ -10,6 +10,17 @@ class UI {
         return document.querySelector("#blog-post-template");
     }
 
+    /**
+     * Creates a <script> element that loads the Disqus comment counter.
+     */
+    public static createDisqusCounterScript(): HTMLScriptElement {
+        const script = document.createElement("script");
+        script.id = "dsq-count-scr";
+        script.src = "https://oliverbooth-dev.disqus.com/count.js";
+        script.async = true;
+        return script;
+    }
+
     /**
      * Forces all UI elements to update.
      */

src/ts/app.ts

@@ -47,6 +47,8 @@ declare const Handlebars: any;
                 i += 4;
             }
 
+            document.body.appendChild(UI.createDisqusCounterScript());
+
             const spinner = document.querySelector("#blog-loading-spinner");
             if (spinner) {
                 spinner.classList.add("removed");