add ease transition to product list

client/css/products.css

@@ -1,7 +1,7 @@
 ul.product-list {
     list-style: none;
     text-align: center;
-    min-height: 50%;
+    min-height: 600px;
 }
 
 ul.product-list li {

client/css/styles.css

@@ -31,6 +31,11 @@
     src: url('../fonts/Angelface.otf');
 }
 
+[rv-cloak] {
+    opacity: 0;
+    transition: opacity 200ms ease;
+}
+
 section[rv-transition] {
     opacity: 0;
     transition: opacity 400ms ease;

client/index.html

@@ -147,7 +147,7 @@
                 </nav>
 
                 <ul class="product-list" rv-show="data.productView.list">
-                    <li rv-each-product="data.products">
+                    <li rv-each-product="data.products" rv-cloak>
                         <div class="product-short-desc">
                             <!--rv-src-strict="product.thumbUrl"-->
                             <img>

client/js/app.js

@@ -57,8 +57,11 @@ function fetchProducts(category) {
 
 function getProducts(category) {
     fetchProducts(category).then(function(xs) {
+        data.products = [];
         data.allProducts[category] = xs;
-        data.products = xs;
+        xs.forEach(function (x) {
+            data.products.push(x);
+        })
     })
 }
 

client/js/binders.js

@@ -27,4 +27,10 @@ rivets.binders['selected-section'] = function (el, sectionState) {
     } else {
         el.classList.remove('selected');
     }
+}
+
+rivets.binders['cloak'] = function (el) {
+    setTimeout(function() {
+        el.style.opacity = 1;
+    }, 200);
 }