Added database creation indicator #87

* Added indicator to show database is being created when initially
  loading a JSON file

Signed-off-by: Jillian Daguil <[email protected]>

Author: jdaguil

assets/css/main.css

@@ -145,13 +145,14 @@ div.node-content {
 
 #leftCol{
   padding-top: 10px;
-margin-left: -50px;                               /* For sidebar space */
+  /* For sidebar space */
+  margin-left: -50px;
 }
 
 /*////// Sidebar //////*/
 .btn-sidebar {
-    color: grey;
-    background-color: #000;
+  color: grey;
+  background-color: #000;
     /*border-color: #ccc;*/
   padding: 0;
   width: 50px;
@@ -183,11 +184,13 @@ margin-left: -50px;                               /* For sidebar space */
 
 /*////// DataTables custom //////*/
 
-div.dataTables_scrollHead table {               /*For rounded table border*/
+/*For rounded table border*/
+div.dataTables_scrollHead table {
   border-top-left-radius: 4px;
 }
 
-div.dataTables_scrollHead th:first-child {      /*For rounded table border*/
+/*For rounded table border*/
+div.dataTables_scrollHead th:first-child {
   border-top-left-radius: 4px;
 }
 
@@ -202,3 +205,37 @@ div.dataTables_scrollHead th:first-child {      /*For rounded table border*/
 /*////// Components view //////*/
 
 #tabbar.col-md-11 {margin-left: -15px;}
+
+/*////// Progress Indicator //////*/
+
+/* Center the progress indicator */
+#db-indicator{
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 1;
+  width: 150px;
+  height: 150px;
+  margin: -75px 0 0 -75px;
+  border: 6px solid #B4DDF8;
+  border-radius: 50%;
+  border-top: 6px solid #3498db;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
+  display: none;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+#indicator-text {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 1;
+  margin: -120px 0 0 -125px;
+  display: none;
+}

assets/js/renderer.js

@@ -525,7 +525,7 @@ $(document).ready(function () {
                             dbName: "demo_schema",
                             dbStorage: fileName,
                         });
-
+                        showProgressIndicator();
                         // The flattened data is used by the clue table and jstree
                         aboutCodeDB.addFlattenedRows(json)
                             .then(() => aboutCodeDB.addScanData(json))
@@ -543,6 +543,7 @@ $(document).ready(function () {
                                 // loading data into jstree
                                 jstree.jstree(true).refresh(true);
                             })
+                            .then(() => hideProgressIndicator())
                             .catch(function (reason) {
                                 throw reason;
                             });
@@ -551,6 +552,22 @@ $(document).ready(function () {
         });
     });
 
+    // Show database creation indicator and hide table view
+    function showProgressIndicator() {
+        $("#db-indicator").show();
+        $("#indicator-text").show();
+        $("#tabbar").hide();
+        $("#leftCol").hide();
+    }
+
+    // Hide database creation indicator and show table view
+    function hideProgressIndicator() {
+        $("#tabbar").show();
+        $("#leftCol").show();
+        $("#db-indicator").hide();
+        $("#indicator-text").hide();
+    }
+
     // Export JSON file with components that have been created
     ipcRenderer.on('export-JSON', function () {
         dialog.showSaveDialog({

index.html

@@ -80,6 +80,8 @@
             </ul>
         </div>
     </div>
+    <div id="indicator-text"><h4>Creating Database ...</h4></div>
+    <div id="db-indicator"></div>
     <div class="col-md-2" id="leftCol">
         <div id="jstree"></div>
     </div>