Added loading style to entire CRUD document list if the list is refreshing

src/containers/CrudList/index.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import uniqid from 'uniqid';
 
 import {
@@ -19,6 +20,8 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import CrudDocument from 'components/CrudDocument';
 import AddCrudItem from 'components/AddCrudItem';
 
+import './style.scss';
+
 const mapStateToProps = (state, { route }) => ({
     loading: getCrudLoading(state, route),
     items: getDocs(state, route)
@@ -90,7 +93,7 @@ class CrudList extends Component {
         ));
 
         return (
-            <div className="crud-list-wrapper">
+            <div className={classNames('crud-list-wrapper', { loading })}>
                 <div className="head">
                     <h3 className="title">{title}</h3>
                     <div className="meta">

src/containers/CrudList/style.scss

@@ -0,0 +1,10 @@
+@import '~variables';
+
+.crud-list-wrapper {
+    &.loading {
+        .body {
+            opacity: $opacity-pending;
+        }
+    }
+}
+