added loadingbar and incorporated into the filterabledatatable

jsx/FilterableDataTable.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import Panel from 'jsx/Panel';
 import DataTable from 'jsx/DataTable';
 import Filter from 'jsx/Filter';
+import LoadingBar from 'jsx/LoadingBar';
 
 /**
  * FilterableDataTable component.
@@ -149,7 +150,10 @@ class FilterableDataTable extends Component {
       />
     );
 
-    const dataTable = (
+    const { progress } = this.props;
+    const dataTable = !isNaN(progress) && progress < 100 ? (
+      <LoadingBar progress={progress}/>
+    ) : (
       <DataTable
         data={this.props.data}
         fields={this.props.fields}

jsx/LoadingBar.js

@@ -0,0 +1,47 @@
+// ########### CBIGR START ###########
+import React from 'react';
+
+/**
+ * LoadingBar is a React component which shows a loading bar while
+ * something is loading.
+ *
+ * @param {array} props - The React props
+ *
+ * @return {DOMObject} - Loading Bar React component
+ */
+function LoadingBar(props) {
+  const {progress} = props;
+
+  const wrapperStyle = {
+    margin: 50,
+  };
+
+  const containerStyles = {
+    height: 5,
+    backgroundColor: '#e0e0de',
+    borderRadius: 50,
+  };
+
+  const fillerStyles = {
+    height: '100%',
+    width: `${progress}%`,
+    backgroundColor: '#E89A0C',
+    borderRadius: 'inherit',
+    textAlign: 'right',
+    transition: 'width 1s linear',
+  };
+
+  const progressBar = progress >= 0 ? (
+    <div style={wrapperStyle}>
+      <h5 className='animate-flicker'>Loading...</h5>
+      <div style={containerStyles}>
+        <div style={fillerStyles}/>
+      </div>
+    </div>
+  ) : null;
+
+  return progressBar;
+};
+
+export default LoadingBar;
+// ###########  CBIGR END  ###########

webpack.config.ts

@@ -133,6 +133,7 @@ const resolve: webpack.ResolveOptions = {
     FilterableDataTable: path.resolve(__dirname, './jsx/FilterableDataTable'),
     FilterForm: path.resolve(__dirname, './jsx/FilterForm'),
     Loader: path.resolve(__dirname, './jsx/Loader'),
+    LoadingBar: path.resolve(__dirname, './jsx/LoadingBar'),
     Modal: path.resolve(__dirname, './jsx/Modal'),
     MultiSelectDropdown: path.resolve(__dirname, './jsx/MultiSelectDropdown'),
     PaginationLinks: path.resolve(__dirname, './jsx/PaginationLinks'),