Add first implementation of loading modal

app/corpora/events.py

@@ -55,6 +55,7 @@ def observe_corpus_analysis_connection(app, corpus_id, session_id):
                                      username='opaque')
         analysis_client.connect()
         analysis_clients[session_id] = analysis_client
+        socketio.emit('init_corpus_analysis', 'Ready', room=session_id)
         while session_id in connected_sessions:
             try:
                 analysis_client.ctrl_ping()

app/templates/base.html.j2

@@ -158,9 +158,7 @@
     </header>
 
     <main class="grey lighten-5">
-          {% block main_block %}
-          {% endblock %}
-
+      {% block main_block %}{% endblock %}
     </main>
 
     <footer class="page-footer">
@@ -188,6 +186,10 @@
           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();
         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

@@ -3,6 +3,9 @@
 {% 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>
 
 
@@ -125,4 +128,23 @@ function sendQueryData() {
   console.log('Query data has been sent!')
 }
 </script>
+
+<div id="loading-modal" class="modal no-autoinit">
+  <div class="modal-content">
+    <h4>Waiting for analysis software</h4>
+    <div class="preloader-wrapper big active">
+      <div class="spinner-layer spinner-blue-only">
+        <div class="circle-clipper left">
+          <div class="circle"></div>
+        </div>
+        <div class="gap-patch">
+          <div class="circle"></div>
+        </div>
+        <div class="circle-clipper right">
+          <div class="circle"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}