init materialize elements the right way.

app/templates/base.html.j2

@@ -182,14 +182,7 @@
           document.getElementById("nav-account"),
           {"alignment": "right", "constrainWidth": false, "coverTrigger": false}
         );
-        M.Dropdown.init(
-          document.getElementById("new-job"),
-          {"coverTrigger": false}
-        );
-        var loadingModal = document.getElementById("loading-modal");
-        console.log(loadingModal);
-        M.Modal.init(loadingModal, {"dismissible": false});
-        M.Modal.getInstance(loadingModal).open();
+        // Highlight current navigation entry
         var entry;
         for (entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
           if (entry.href === window.location.href) {

app/templates/corpora/corpus_analysis.html.j2

@@ -1,15 +1,6 @@
 {% extends "full_width.html.j2" %}
 
 {% block page_content %}
-<script>
-socket.emit('init_corpus_analysis', {{ corpus_id }});
-socket.on('init_corpus_analysis', function(msg) {
-  if (msg === 'Ready') {M.Modal.getInstance(document.getElementById("loading-modal")).close();}
-});
-</script>
-
-
-
 <div class="col s12 m3 l3 sticky">
   <a class="waves-effect waves-light btn" href="{{ url_for('corpora.corpus', corpus_id=corpus_id) }}"><i class="material-icons left">arrow_back</i>Back to corpus overview</a>
   <div class="card">
@@ -141,4 +132,18 @@ function sendQueryData() {
     </div>
   </div>
 </div>
+
+<script>
+var loadingModal;
+
+document.addEventListener('DOMContentLoaded', function() {
+  loadingModal = M.Modal.init(document.getElementById("loading-modal"), {"dismissible": false});
+  loadingModal.open();
+});
+
+socket.emit('init_corpus_analysis', {{ corpus_id }});
+socket.on('init_corpus_analysis', function(msg) {
+  if (msg === 'Ready') {loadingModal.close();}
+});
+</script>
 {% endblock %}

app/templates/main/dashboard.html.j2

@@ -89,4 +89,13 @@
   <li><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
   <li><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
 </ul>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    M.Dropdown.init(
+      document.getElementById("new-job"),
+      {"coverTrigger": false}
+    );
+  });
+</script>
 {% endblock %}