Loading 1455 (reactioncommerce#1471)

* Updated loader component to be consistent with other spinners

Added loader for PDP container.
Added a basic circular progress component.
Removed domkit package.
Replaced loader with already available spinner component through CSS.

* Renamed loading.jsx to loading.js. JSX extension is unnecessary.

imports/plugins/core/ui/client/components/index.js

@@ -2,6 +2,7 @@
 
 export { Alerts, Alert } from "./alerts";
 export { default as Icon } from "./icon/icon";
+export { default as CircularProgress } from "./progress/circularProgress";
 export { default as Divider } from "./divider/divider";
 export { default as Items } from "./items/items";
 export { default as Item } from "./items/item";

imports/plugins/core/ui/client/components/loading/loading.js

@@ -0,0 +1,14 @@
+import React, { Component } from "react";
+import CircularProgress from "../progress/circularProgress";
+
+class Loading extends Component {
+  render() {
+    return (
+      <div className="spinner-container spinner-container-lg">
+        <CircularProgress indetermate={true} />
+      </div>
+    );
+  }
+}
+
+export default Loading;

imports/plugins/core/ui/client/components/progress/circularProgress.js

@@ -0,0 +1,27 @@
+import React, { Component, PropTypes } from "react";
+
+class CircularProgress extends Component {
+  renderInderterminateProgress() {
+    return (
+      <div className="spinner" />
+    );
+  }
+
+  render() {
+    if (this.props.indetermate === true) {
+      return this.renderInderterminateProgress();
+    }
+
+    return null;
+  }
+}
+
+CircularProgress.propTypes = {
+  indetermate: PropTypes.bool
+};
+
+CircularProgress.defaultProps = {
+  indetermate: true
+};
+
+export default CircularProgress;

imports/plugins/included/product-detail-simple/client/containers/productDetailContainer.js

@@ -6,6 +6,7 @@ import { composeWithTracker } from "react-komposer";
 import { ReactionProduct } from "/lib/api";
 import { Reaction, i18next, Logger } from "/client/api";
 import { Tags, Media } from "/lib/collections";
+import { Loading } from "/imports/plugins/core/ui/client/components";
 import { ProductDetail } from "../components";
 import {
   SocialContainer,
@@ -235,6 +236,6 @@ function composer(props, onData) {
 let decoratedComponent = ProductDetailContainer;
 // decoratedComponent = DragDropContext(HTML5Backend)(decoratedComponent);
 // decoratedComponent = DragDropable(decoratedComponent);
-decoratedComponent = composeWithTracker(composer)(decoratedComponent);
+decoratedComponent = composeWithTracker(composer, Loading)(decoratedComponent);
 
 export default decoratedComponent;

package.json

@@ -34,7 +34,6 @@
     "css-annotation": "^0.6.2",
     "deep-diff": "^0.3.4",
     "dnd-core": "^2.0.2",
-    "domkit": "^0.0.1",
     "faker": "^3.1.0",
     "fibers": "^1.0.14",
     "font-awesome": "^4.6.3",