Merging some shared styles

spec/parser/javascript_spec.js

@@ -30,6 +30,12 @@ describe('parser/javascript.js', function() {
       expect(element.innerHTML).not.toEqual('example content');
     });
 
+    it('adds the "svg-container" class', function() {
+      spyOn(this.parser, '_addClass');
+      this.parser.container = document.createElement('div');
+      expect(this.parser._addClass).toHaveBeenCalledWith('svg-container');
+    });
+
   });
 
   describe('#parse', function() {

src/js/parser/javascript.js

@@ -28,6 +28,7 @@ export default class Parser {
       document.querySelector('#svg-container-base').innerHTML,
       this.options.keepContent ? this.container.innerHTML : ''
     ].join('');
+    this._addClass('svg-container');
   }
 
   get container() {
@@ -35,11 +36,17 @@ export default class Parser {
   }
 
   _addClass(className) {
-    this.container.className = _.compact([this.container.className, className]).join(' ');
+    this.container.className = _(this.container.className.split(' '))
+      .union([className])
+      .value()
+      .join(' ');
   }
 
   _removeClass(className) {
-    this.container.className = _.without(this.container.className.split(' '), className).join(' ');
+    this.container.className = _(this.container.className.split(' '))
+      .without(className)
+      .value()
+      .join(' ');
   }
 
   parse(expression) {

src/sass/main.scss

@@ -48,6 +48,15 @@ ul.inline-list {
   }
 }
 
+.svg-container {
+  min-width: 200px;
+
+  &.loading .svg {
+    position: absolute;
+    top: -10000px;
+  }
+}
+
 #deprecation-notice {
   @include background(linear-gradient(top, $green, $dark-green));
   background-color: $green;
@@ -209,15 +218,6 @@ header {
         margin-right: rhythm(1/2);
       }
 
-      &.loading {
-        min-width: 100px;
-
-        .svg {
-          position: absolute;
-          top: -10000px;
-        }
-      }
-
       .svg {
         margin: 0;
         text-align: center;
@@ -354,15 +354,7 @@ header {
   text-align: center;
   display: none;
 
-  body.is-loading & {
+  body.is-loading &,
-    display: block;
-
-    .svg {
-      position: absolute;
-      top: -10000px;
-    }
-  }
-
   body.has-results & {
     display: block;
   }