loader on product view

4 files changed, 22 insertions, 4 deletions

diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css
index 9ded00d1..e78ee9df 100644
--- a/StoneIsland/www/css/products.css
+++ b/StoneIsland/www/css/products.css
@@ -21,6 +21,14 @@
   display: none;
 }
 
+#product.loading #gallery,
+#product.loading .content {
+  display: none;
+}
+#product.loading .loader {
+  display: block;
+}
+
 #gallery {
   width: 100vw;
   height: 63vw;
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 06f4335f..ebd82423 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -145,6 +145,7 @@
   
   <div id="product">
     <div class="scroll">
+      <div class="loader"></div>
       <div id="gallery">
         <script type="text/html" class="template">
           <div class="item" style="background-image:url({{image}})"></div>
@@ -164,8 +165,7 @@
       </div>
     </div>
   </div>
-  
-  
+
   <div id="selector">
     <span class="close"></span>
     <div class="options">
diff --git a/StoneIsland/www/js/lib/products/GalleryView.js b/StoneIsland/www/js/lib/products/GalleryView.js
index a139c454..ea4637eb 100644
--- a/StoneIsland/www/js/lib/products/GalleryView.js
+++ b/StoneIsland/www/js/lib/products/GalleryView.js
@@ -15,6 +15,11 @@ var GalleryView = View.extend({
     this.$(".template").remove()
   },
   
+  reset: function(){
+    this.gallery && this.gallery.destroy()
+    this.$el.empty()
+  },
+  
   populate: function(code, image_ids){
     var valid_styles = {}
     image_ids.forEach(function(id){
diff --git a/StoneIsland/www/js/lib/products/ProductView.js b/StoneIsland/www/js/lib/products/ProductView.js
index a179d227..c5a7ff29 100644
--- a/StoneIsland/www/js/lib/products/ProductView.js
+++ b/StoneIsland/www/js/lib/products/ProductView.js
@@ -44,8 +44,10 @@ var ProductView = ScrollableView.extend({
   cache: {},
   
   load: function(code, data){
+    this.gallery.reset()
     this.show()
     if (! app.collection.loaded) {
+      this.el.className = "loading"
       app.collection.afterFetchCallback = this.load.bind(this, code, data)
       app.collection.fetch()
       return
@@ -58,6 +60,9 @@ var ProductView = ScrollableView.extend({
     if (code in this.cache) {
       return this.populate(data, this.cache[code])
     }
+    else {
+      this.el.className = "loading"
+    }
     sdk.product.item({
       code: code,
       success: function(details){
@@ -68,7 +73,7 @@ var ProductView = ScrollableView.extend({
   },
   
   populate: function(data, details){
-    this.show()
+    this.el.className = ""
     console.log(data, details)
 
     var descriptions = {}
@@ -86,7 +91,7 @@ var ProductView = ScrollableView.extend({
     var size_label = SIZE_LOOKUP[size]
     var color = data['Colors'].length && data['Colors'][0]
     var color_label = color && color['Text']
-    var body = descriptions['EditorialDescription']
+    var body = descriptions['EditorialDescription'].replace(/<br>/g, "<br><br>")
     
     this.item = data
     this.color = color