Add loading icon when accessing CribData

cribjs.css

@@ -22,3 +22,17 @@ iframe {
   background-color: #cd0000;
 }
 
+.rotate {
+  animation: spin 1s linear infinite;
+  -webkit-animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

cribjs_launcher.js

@@ -25,9 +25,41 @@
       });
   }
 
+  function increaseLoadingCounter(gadget) {
+    return new RSVP.Queue()
+      .push(function () {
+        gadget.props.loading_counter += 1;
+        if (gadget.props.loading_counter === 1) {
+          return gadget.getDeclaredGadget("header")
+            .push(function (header_gadget) {
+              return header_gadget.notifyLoading();
+            });
+        }
+      });
+  }
+
+  function decreaseLoadingCounter(gadget) {
+    return new RSVP.Queue()
+      .push(function () {
+        gadget.props.loading_counter -= 1;
+        if (gadget.props.loading_counter < 0) {
+          gadget.props.loading_counter = 0;
+          // throw new Error("Unexpected negative loading counter");
+        }
+        if (gadget.props.loading_counter === 0) {
+          return gadget.getDeclaredGadget("header")
+            .push(function (header_gadget) {
+              return header_gadget.notifyLoaded();
+            });
+        }
+      });
+  }
   function callCribSWGadget(gadget, method, param_list) {
     var called = false;
     return new RSVP.Queue()
+      .push(function () {
+      return increaseLoadingCounter(gadget);
+    })
       .push(function () {
       return gadget.getDeclaredGadget("crib_sw_gadget");
     })
@@ -35,10 +67,20 @@
       return crib_sw_gadget[method].apply(crib_sw_gadget, param_list);
     })
       .push(function (result) {
-      return  result;
-    }, function (error) {
-      throw error;
-    });
+        return decreaseLoadingCounter(gadget)
+          .push(function () {
+            return result;
+          });
+      }, function (error) {
+        if (called) {
+          return decreaseLoadingCounter(gadget)
+            .push(function () {
+              throw error;
+            });
+        }
+        throw error;
+      });
+
   }
 
   function route(my_root_gadget, my_scope, my_method, my_param_list) {
@@ -169,6 +211,7 @@
       g.props = {};
       return g.getElement()
         .push(function (element) {
+          g.props.loading_counter = 0;
           g.props.element = element;
           g.props.content_element = element.querySelector('.gadget-content');
         });

gadget/gadget_cribjs_header.html

@@ -57,6 +57,10 @@
             <li><a class="tools" href="#page=tools">Tools</a></li>
             <li><a class="mass_remove" href="#page=mass_remove">Remove</a></li>
           </ul>
+          <ul class="nav navbar-nav navbar-right">
+            <li><li><a class="rotate loader" style="font-size: xx-large;">🌀</a></li>
+          </ul>
+
         </div>
       </div>
     </nav>

gadget/gadget_cribjs_header.js

@@ -36,7 +36,7 @@
     .ready(function (g) {
       g.props = {};
       g.stats = {
-        loaded: false,
+        loaded: true,
         modified: false,
         submitted: true,
         error: false,
@@ -81,6 +81,11 @@
       var gadget = this,
         page_list = ["cribjs_home", "url_list", "save_load", "tools", "mass_remove"],
         promise_list = [];
+      if (gadget.stats.loaded) {
+        gadget.props.element.querySelector(".loader").style.display = "none";
+      } else {
+        gadget.props.element.querySelector(".loader").style.display = "";
+      }
 
       gadget.stats.options = options;
       page_list.forEach(function (page) {