added loadingbar and incorporated into the filterabledatatable

remove CBIGR override comments

added typescripting

trying to pass validation

passing checks

added progress to proptypes

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.
@@ -35,7 +36,6 @@ class FilterableDataTable extends Component {
 
   /**
    * Updates filter state
-   *
    * @param {object} filters
    */
   updateFilters(filters) {
@@ -48,7 +48,6 @@ class FilterableDataTable extends Component {
 
   /**
    * Updates URL Query Params
-   *
    * @param {object} filters
    */
   updateQueryParams(filters) {
@@ -66,7 +65,6 @@ class FilterableDataTable extends Component {
 
   /**
    * Add new filter to the filter object
-   *
    * @param {string} name
    * @param {*}      value
    * @param {boolean}   exactMatch
@@ -79,7 +77,6 @@ class FilterableDataTable extends Component {
 
   /**
    * Remove filter from the filter object
-   *
    * @param {string} name
    */
   removeFilter(name) {
@@ -99,7 +96,6 @@ class FilterableDataTable extends Component {
    * Returns the filter state, with filters that are
    * set to an invalid option removed from the returned
    * filters
-   *
    * @return {object}
    */
   validFilters() {
@@ -129,7 +125,6 @@ class FilterableDataTable extends Component {
 
   /**
    * Renders the React component.
-   *
    * @return {JSX} - React markup for the component
    */
   render() {
@@ -149,7 +144,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}
@@ -191,6 +189,7 @@ FilterableDataTable.propTypes = {
   updateFilterCallback: PropTypes.func,
   noDynamicTable: PropTypes.bool,
   loading: PropTypes.element,
+  progress: PropTypes.number,
   getMappedCell: PropTypes.func,
   folder: PropTypes.element,
   nullTableShow: PropTypes.element,

jsx/LoadingBar.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+interface LoadingBarProps {
+  progress: number; // Expect progress to be a number
+}
+
+/**
+ * LoadingBar is a React component that displays a progress bar to indicate
+ * loading status.
+ *
+ * @param {number} progress - A number representing the loading progress (0 to
+ * 100).
+ *
+ * @returns {JSX.Element|null} - Returns a Loading Bar React component if
+ * progress is valid, otherwise null.
+ */
+const LoadingBar: React.FC<LoadingBarProps> = ({progress}) => {
+  const wrapperStyle: React.CSSProperties = {
+    margin: '50px 0',
+  };
+
+  const containerStyles: React.CSSProperties = {
+    height: '5px',
+    backgroundColor: '#e0e0de',
+    borderRadius: '50px',
+    overflow: 'hidden',
+  };
+
+  const fillerStyles: React.CSSProperties = {
+    height: '100%',
+    width: `${progress}%`,
+    backgroundColor: '#E89A0C',
+    borderRadius: 'inherit',
+    textAlign: 'right',
+    transition: 'width 1s linear',
+  };
+
+  const progressBar = progress >= 0 ? (
+    <div
+      style={wrapperStyle}
+      role="progressbar"
+      aria-valuenow={progress}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
+      <h5 className="animate-flicker" aria-live="polite">Loading...</h5>
+      <div style={containerStyles}>
+        <div style={fillerStyles} />
+      </div>
+    </div>
+  ) : null;
+
+  return progressBar;
+};
+
+export default LoadingBar;

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'),