Block access to interactive UI when we're not connected, since values may be stale and changes may be delayed.

static/babystats.css

@@ -130,6 +130,18 @@ babyStatsWeight, babyStatsTemp {
   outline: 2px solid rgb(233,127,2);
 }
 
+babyStatsSpinner {
+  position: absolute;
+  top: 80px;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url('/static/spinner.svg');
+}
+
 babyStatsGridOverlay {
   display: flex;
   position: absolute;

static/babystats.js

@@ -168,6 +168,8 @@ BabyStats.prototype.checkInit_ = function() {
   this.chat_.addEventListener('request', this.checkOverlay_.bind(this));
   this.chat_.addEventListener('request_denied', this.checkOverlay_.bind(this));
   this.chat_.addEventListener('acl_change', this.checkOverlay_.bind(this));
+  this.cosmo_.addEventListener('connect', this.checkOverlay_.bind(this));
+  this.cosmo_.addEventListener('disconnect', this.checkOverlay_.bind(this));
 
   this.updateTileStatus_();
   this.updateDisplayPage_();
@@ -343,6 +345,7 @@ BabyStats.prototype.rebuildIfNeeded_ = function(e) {
  */
 BabyStats.prototype.setTransitions_ = function() {
   this.gridOverlayRule_.style.transition = '0.4s';
+  this.spinner_.style.transition = '0.4s';
   this.measurementPrompt_.style.transition = '0.4s';
   this.cellOverlayRule_.style.transition = '0.4s';
   this.flipperRule_.style.transition = '1.0s';
@@ -658,6 +661,9 @@ BabyStats.prototype.buildLayout_ = function() {
   this.gridOverlay_ = document.createElement('babyStatsGridOverlay');
   front.appendChild(this.gridOverlay_);
 
+  this.spinner_ = document.createElement('babyStatsSpinner');
+  front.appendChild(this.spinner_);
+
   // Back (read-only) side
   this.displayChildName_ = document.createElement('babyStatsDisplayChildName');
   back.appendChild(this.displayChildName_);
@@ -762,8 +768,15 @@ BabyStats.prototype.checkOverlay_ = function() {
     }.bind(this));
   }
 
+  this.spinner_.style.visibility = 'hidden';
+  this.spinner_.style.opacity = 0.0;
+
   var message = '', actions = [];
-  if (!this.childName_.value) {
+  if (!this.cosmo_.isConnected()) {
+    this.spinner_.style.visibility = 'visible';
+    this.spinner_.style.opacity = 1.0;
+    message = ' ';
+  } else if (!this.childName_.value) {
     message = 'Please enter child name above';
   } else if (!this.yourName_.value) {
     message = 'Please enter your name above';

static/spinner.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<style type="text/css" >
+  <![CDATA[
+@keyframes coloredBounce {
+  0% {
+    fill: #430a39;
+    transform: translate(0, -20px);
+  }
+
+  20% {
+    fill: #bc1550;
+    transform: translate(19px, -6px);
+  }
+
+  40% {
+    fill: #e87f02;
+    transform: translate(12px, 16px);
+  }
+
+  60% {
+    fill: #f5c700;
+    transform: translate(-12px, 16px);
+  }
+
+  80% {
+    fill: #88990f;
+    transform: translate(-19px, -6px);
+  }
+
+  100% {
+    fill: #430a39;
+    transform: translate(0, -20px);
+  }
+}
+
+circle {
+  animation: coloredBounce 5s linear infinite;
+}
+  ]]>
+</style>
+<circle r="5" cx="50" cy="50"></circle>
+<circle r="5" cx="50" cy="50" style="animation-delay: -1s"></circle>
+<circle r="5" cx="50" cy="50" style="animation-delay: -2s"></circle>
+<circle r="5" cx="50" cy="50" style="animation-delay: -3s"></circle>
+<circle r="5" cx="50" cy="50" style="animation-delay: -4s"></circle>
+</svg>