feat: tables empty status.

client/src/components/EmptyStatus.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+export default function EmptyStatuts({ title, description, action, children }) {
+  return (
+    <div className={classNames(CLASSES.DATATABLE_EMPTY_STATUS)}>
+      <h1 className={classNames(CLASSES.DATATABLE_EMPTY_STATUS_TITLE)}>
+        {title}
+      </h1>
+
+      <div className={classNames(CLASSES.DATATABLE_EMPTY_STATUS_DESC)}>
+        {description}
+      </div>
+
+      <div className={classNames(CLASSES.DATATABLE_EMPTY_STATUS_ACTIONS)}>
+        {action}
+      </div>
+      {children}
+    </div>
+  );
+}

client/src/components/LoadingIndicator.js

@@ -1,39 +1,53 @@
-import React, {useState, useEffect, useMemo} from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { Spinner } from '@blueprintjs/core';
 
 export default function LoadingIndicator({
   loading,
   spinnerSize = 40,
   children,
-  mount = true,
+  mount = false,
 }) {
   const [rendered, setRendered] = useState(mount);
 
   useEffect(() => {
-    if (!loading) { setRendered(true); }
+    if (!loading) {
+      setRendered(true);
+    }
   }, [loading]);
 
   const componentStyle = useMemo(() => {
-    return {display: !loading ? 'block' : 'none'};
+    return { display: !loading ? 'block' : 'none' };
   }, [loading]);
 
-  const loadingComponent = useMemo(() => (
-    <div class='dashboard__loading-indicator'>
-      <Spinner size={spinnerSize} value={null} />
-    </div>
-  ), [spinnerSize]);
+  const loadingComponent = useMemo(
+    () => (
+      <div class="dashboard__loading-indicator">
+        <Spinner size={spinnerSize} value={null} />
+      </div>
+    ),
+    [spinnerSize],
+  );
 
-  const renderComponent = useMemo(() => (
-    <div style={componentStyle}>{ children }</div>
-  ), [children, componentStyle]);
+  // Renders children with wrapper or without wrapper, in mount mode
+  // rendering with wrapper.
+  const renderChildren = useMemo(
+    () => (mount ? <div style={componentStyle}>{children}</div> : children),
+    [children, mount, componentStyle],
+  );
 
-  const maybeRenderComponent = (rendered && children) && renderComponent;
+  // Render children component or not in loading and in mount mode rendering
+  // anyway.
+  const renderComponent = useMemo(
+    () => (!loading || mount ? renderChildren : null),
+    [renderChildren, loading, mount],
+  );
+  const maybeRenderComponent = rendered && children && renderComponent;
   const maybeRenderLoadingSpinner = loading && loadingComponent;
 
   return (
     <>
-      { maybeRenderLoadingSpinner }
-      { maybeRenderComponent }
+      {maybeRenderLoadingSpinner}
+      {maybeRenderComponent}
     </>
   );
 }

client/src/components/index.js

@@ -1,3 +1,4 @@
+
 import If from './Utils/If';
 import Money from './Money';
 import Icon from './Icon';
@@ -36,6 +37,7 @@ import SalutationList from './SalutationList';
 import DisplayNameList from './DisplayNameList';
 import MoneyInputGroup from './MoneyInputGroup';
 import Dragzone from './Dragzone';
+import EmptyStatus from './EmptyStatus';
 
 const Hint = FieldHint;
 
@@ -79,4 +81,5 @@ export {
   SalutationList,
   MoneyInputGroup,
   Dragzone,
+  EmptyStatus
 };