--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/clientjs/packages/dashboard-components/src/ui/Loader.jsx	Fri Sep 14 17:57:34 2018 +0200
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { connect } from 'react-redux';
+
+import Nanobar from 'nanobar';
+
+import './Loader.scss';
+
+export class LoaderComponent extends Component {
+  componentDidMount() {
+    const opt = {
+      id: 'bar-main',
+      target: document.getElementById('nanobar'),
+    };
+
+    this.nanobar = new Nanobar(opt);
+
+    // this.nanobar.go(10);
+  }
+
+  componentDidUpdate() {
+    const { go } = this.props;
+    this.nanobar.go(go);
+  }
+
+  render() {
+    return <div id="nanobar" />;
+  }
+}
+
+
+LoaderComponent.propTypes = {
+  go: PropTypes.number.isRequired,
+};
+
+export default connect(
+  (state) => {
+    switch (state.annotations.isFetching) {
+      case true:
+        return { go: 50 };
+
+      case false:
+        return { go: 100 };
+      default:
+        return {};
+    }
+  },
+)(LoaderComponent);