Added spinner

package-lock.json

@@ -52,7 +52,7 @@
     },
     "@sinonjs/formatio": {
       "version": "2.0.0",
-      "resolved": "http://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
       "integrity": "sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==",
       "dev": true,
       "requires": {

src/css/custom.scss

@@ -21,6 +21,7 @@ $mui-link-font-color:   mui-color('yellow', '900') !default;
 @import "./node_modules/muicss/lib/sass/mui";
 @import "./src/css/viewport";
 @import "./src/css/horscroll";
+@import "./src/css/spinner";
 ////
 
 body {

src/css/spinner.scss

@@ -0,0 +1,92 @@
+$green: #008744;
+$blue: #0057e7;
+$red: #d62d20;
+$yellow: #ffa700;
+$white: #eee;
+
+// scaling... any units
+$width: 100px;
+
+body {
+  background-color: $white;
+}
+
+// demo-specific
+.showbox {
+  position: absolute;
+  top: 40vh;
+  bottom: 60vh;
+  left: 0;
+  right: 0;
+  padding: 5%;
+}
+// end demo-specific
+
+.loader {
+  position: relative;
+  margin: 0 auto;
+  width: $width;
+  &:before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+  }
+}
+
+.circular {
+  animation: rotate 2s linear infinite;
+  height: 100%;
+  transform-origin: center center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+.path {
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+  stroke-linecap: round;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+
+@keyframes color {
+  100%,
+  0% {
+    stroke: $red;
+  }
+  40% {
+    stroke: $blue;
+  }
+  66% {
+    stroke: $green;
+  }
+  80%,
+  90% {
+    stroke: $yellow;
+  }
+}

src/service-worker.js

@@ -11,7 +11,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-const CACHE_VERSION = { 'version': '0.0.645' };
+const CACHE_VERSION = { 'version': '0.0.651' };
 const dataCacheName = 'jubileeData-v1';
 const cacheName = 'jubilee-final-1';
 const filesToCache = [

src/v1/js/NearbyList.js

@@ -106,7 +106,7 @@ const NearbyListView = Backbone.View.extend({
 
     this.$el = addPanel(this.$newPanel);
 
-    this.$el.empty();
+    //this.$el.empty();
     this.$newPanel.show();
 
     // console.log(this.model);

src/v1/js/NewsList.js

@@ -115,7 +115,7 @@ const NewsListView = Backbone.View.extend({
 
     this.$el = addPanel(this.$newPanel);
 
-    this.$el.empty();
+    // this.$el.empty();
     this.$newPanel.show();
   }, 'events': {
     'click': 'doClick'
@@ -129,6 +129,8 @@ const NewsListView = Backbone.View.extend({
   'render' : function() {
     console.log('>> Do render');
 
+    this.$el.empty();
+
     this.model.newsCollection.each(function(item) {
       const niView = new NewsItemView({ 'model': item });
 

src/v1/js/NewsViewer.js

@@ -69,7 +69,7 @@ const NewsCardView = Backbone.View.extend({
 
     this.$el = addPanel(this.$newPanel);
 
-    this.$el.empty();
+   // this.$el.empty();
     this.$newPanel.show();
 
     if (prevGuid === guid)
@@ -88,6 +88,7 @@ const NewsCardView = Backbone.View.extend({
     console.log('close??');
   },
   'doRender': function() {
+    this.$el.empty();
     this.$el.html(this.template(this.model.get('article')));
   }
 

src/v1/js/libs/panel.js

@@ -22,7 +22,16 @@ function createPanel(params) {
     
   <div class="box">
   
-    <div class="content mui-panel" id="${divId}"></div>
+    <div class="content mui-panel" id="${divId}">
+    <div class="showbox">
+      <div class="loader">
+        <svg class="circular" viewBox="25 25 50 50">
+          <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
+        </svg>
+      </div>
+    </div>
+    
+</div>
   </div>
    
  <!-- end fullscreen-->