[IMP] website: imp snippet bar

Force fa size to 14px, to avoid that themes which change body size,
change the fa snippet icon size and display it on severals lines.

Add text 'Snippets are loading' while snippets template is downloading.

addons/website/static/src/css/snippets.css

@@ -9,6 +9,10 @@
   -moz-box-shadow: 0px 10px 10px -10px black inset;
   -webkit-box-shadow: 0px 10px 10px -10px black inset;
   box-shadow: 0px 10px 10px -10px black inset;
+  font-size: 14px;
+}
+#oe_snippets #o_left_bar .snippets_loading, #oe_snippets #o_arrow .snippets_loading {
+  color: white;
 }
 #oe_snippets #o_arrow {
   z-index: 1009;

addons/website/static/src/css/snippets.sass

@@ -13,6 +13,10 @@
         bottom: 0
         background: rgb(40,40,40)
         +box-shadow(0px 10px 10px -10px black inset)
+        font-size: 14px
+        .snippets_loading
+            color: white
+
     #o_arrow
         z-index: 1009
         width: 24px

addons/website/static/src/js/website.snippets.editor.js

@@ -313,7 +313,7 @@
             
             $html.find('.o_not_editable').attr("contentEditable", false);
 
-            $left_bar.append($html);
+            $left_bar.html($html);
 
             // animate for list of snippet blocks
             $left_bar.on('click', '.scroll-link', function (event) {

addons/website/static/src/xml/website.snippets.xml

@@ -20,7 +20,9 @@
                 <div>Insert Blocks</div>
                 <span class="fa fa-angle-double-right fa-1x" style="bottom: 10px;"></span>
             </div>
-            <div id="o_left_bar"></div>
+            <div id="o_left_bar">
+                <span class='snippets_loading'>Snippets are loading...</span>
+            </div>
         </div>
     </t>