1 files changed, 32 insertions, 3 deletions
diff --git a/app/assets/javascripts/blob/notebook_viewer.js b/app/assets/javascripts/blob/notebook_viewer.js
index dda137c6603..057afc9b2e5 100644
--- a/app/assets/javascripts/blob/notebook_viewer.js
+++ b/app/assets/javascripts/blob/notebook_viewer.js
@@ -1,20 +1,49 @@
 import Vue from 'vue';
+import VueResource from 'vue-resource';
 import NotebookLab from 'vendor/notebooklab';
 
+Vue.use(VueResource);
 Vue.use(NotebookLab);
 
 $(() => {
+  const el = document.getElementById('js-notebook-viewer');
+
   new Vue({
-    el: '#js-notebook-viewer',
+    el,
     data() {
       return {
+        loading: true,
         json: {},
       };
     },
     template: `
-      <div>
-        <notebook-lab :notebook="json" />
+      <div class="container-fluid">
+        <i
+          class="fa fa-spinner fa-spin"
+          v-if="loading">
+        </i>
+        <notebook-lab
+          v-if="!loading"
+          :notebook="json" />
       </div>
     `,
+    mounted() {
+      $.get(gon.katex_css_url, () => {
+        const css = $('<link>', {
+          rel: 'stylesheet',
+          type: 'text/css',
+          href: gon.katex_css_url,
+        });
+        css.appendTo('head');
+      });
+
+      $.getScript(gon.katex_js_url, () => {
+        this.$http.get(el.dataset.endpoint)
+          .then((res) => {
+            this.json = res.json();
+            this.loading = false;
+          });
+      });
+    },
   });
 });