Add Loader to App component

- Adjust styling for loader positioning
- Wrap card list in an error boundary
- Add fallback text in case no cards match the filter
- Close #PM150

app/components/App.jsx

@@ -6,6 +6,7 @@ import Box from 'grommet/components/Box';
 import classnames from 'classnames';
 import CardList from '../containers/CardList';
 import SideBar from './Sidebar';
+import Loader from 'UI/Loader';
 import ErrorBoundary from 'UI/Error';
 import Header from 'UI/Header';
 
@@ -27,7 +28,11 @@ class Mdyna extends Component {
             <div className="sidebar-wrapper">
               <SideBar {...this.props}/>
             </div>
-            <CardList cards={this.props.cards}/>
+            {
+              this.props.cards ?
+              <CardList cards={this.props.cards}/> :
+              <Loader/>
+            }
           </Box>
         </Article>
       </ErrorBoundary>

app/components/App.scss

@@ -20,7 +20,10 @@ body {
 }
 
 .loader {
-		animation: rotation 2s infinite linear;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  animation: rotation 2s infinite linear;
 }
 
 @keyframes rotation {

app/components/Cards/CardList.jsx

@@ -10,9 +10,11 @@ import Button from 'grommet/components/Button';
 import Pulse from 'grommet/components/icons/base/Add';
 import LeftIcon from 'grommet/components/icons/base/Previous';
 import RightIcon from 'grommet/components/icons/base/Next';
+import Label from 'grommet/components/Label';
 import classnames from 'classnames';
 import CardEditor from 'Containers/CardEditor';
 import CardItem from 'Containers/CardItem';
+import Error from 'UI/Error';
 
 import './CardList.scss'; // eslint-disable-line
 
@@ -113,9 +115,9 @@ export default class CardList extends Component {
           INBOX
         </Headline>
         {cards.length ? (
-          <React.Fragment>
+          <Error>
             {this.renderAddNoteButton()}
-            {cardItems && cardItems.length ? (
+            {visibleCards && visibleCards.length ? (
               <div className="card-list-pagination">
                 {pageIndex !== 0 && (
                   <button
@@ -152,9 +154,11 @@ export default class CardList extends Component {
                 )}
               </div>
             ) : (
-              ''
+              <Label>
+                No cards to present
+              </Label>
             )}
-          </React.Fragment>
+          </Error>
         ) : (
           <React.Fragment>
             {this.renderAddNoteButton()}

app/components/Sidebar.jsx

@@ -85,8 +85,6 @@ class Sidebar extends Component {
       return ASCENDING_ORDER;
     };
 
-    console.warn(order, sorting, 'SORTING');
-
     return (
       <Box
         full="vertical"

app/components/UI/Error.jsx

@@ -48,10 +48,11 @@ class ErrorBoundary extends React.Component {
 export default ErrorBoundary;
 
 ErrorBoundary.propTypes = {
-  children: PropTypes.object.isRequired,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
   whiteMode: PropTypes.bool,
 };
 
 ErrorBoundary.defaultProps = {
   whiteMode: false,
+  children: [],
 };