refactoring: drawers suspense.

client/src/components/Drawer/Drawer.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { Position, Drawer } from '@blueprintjs/core';
+
+export default function ({ children, isOpen, isClose, drawerProps }) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      title={<T id={'view_paper'} />}
+      position={Position.RIGHT}
+      canOutsideClickClose={true}
+      canEscapeKeyClose={true}
+      size={'65%'}
+      onClose={isClose}
+      {...drawerProps}
+    >
+      {children}
+    </Drawer>
+  );
+}

client/src/components/Drawer/DrawerSuspense.js

@@ -0,0 +1,6 @@
+import React, { Suspense } from 'react';
+import { Spinner } from '@blueprintjs/core';
+
+export default function DrawerSuspense({ children }) {
+  return <Suspense fallback={<Spinner size={30} />}>{children}</Suspense>;
+}

client/src/components/DrawersContainer.js

@@ -2,7 +2,7 @@ import React from 'react';
 import EstimateDrawer from 'containers/Sales/Estimates/EstimateDetails/EstimateDrawer';
 import InvoiceDrawer from 'containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer';
 import ReceiptDrawer from 'containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer';
-import PaymentReceive from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer';
+import PaymentDrawer from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer';
 
 export default function DrawersContainer() {
   return (
@@ -10,7 +10,7 @@ export default function DrawersContainer() {
       <EstimateDrawer name={'estimate-drawer'} />
       <InvoiceDrawer name={'invoice-drawer'} />
       <ReceiptDrawer name={'receipt-drawer'} />
-      <PaymentReceive name={'payment-receive-drawer'} />
+      <PaymentDrawer name={'payment-receive-drawer'} />
     </div>
   );
 }

client/src/components/index.js

@@ -1,4 +1,3 @@
-
 import If from './Utils/If';
 import Money from './Money';
 import Icon from './Icon';
@@ -33,7 +32,7 @@ import Col from './Grid/Col';
 import CloudLoadingIndicator from './CloudLoadingIndicator';
 import MoneyExchangeRate from './MoneyExchangeRate';
 import ContactSelecetList from './ContactSelecetList';
-import CurrencySelectList from './CurrencySelectList'
+import CurrencySelectList from './CurrencySelectList';
 import SalutationList from './SalutationList';
 import DisplayNameList from './DisplayNameList';
 import MoneyInputGroup from './Forms/MoneyInputGroup';
@@ -44,12 +43,14 @@ import InputPrependText from './Forms/InputPrependText';
 import PageFormBigNumber from './PageFormBigNumber';
 import AccountsMultiSelect from './AccountsMultiSelect';
 import ContactsMultiSelect from './ContactsMultiSelect';
-import Skeleton from './Skeleton'
-import ContextMenu from './ContextMenu'
+import Skeleton from './Skeleton';
+import ContextMenu from './ContextMenu';
 import TableFastCell from './Datatable/TableFastCell';
 import DashboardContentTable from './Dashboard/DashboardContentTable';
 import DashboardPageContent from './Dashboard/DashboardPageContent';
 import DashboardInsider from './Dashboard/DashboardInsider';
+import Drawer from './Drawer/Drawer';
+import DrawerSuspense from './Drawer/DrawerSuspense';
 
 const Hint = FieldHint;
 
@@ -105,5 +106,7 @@ export {
   ContextMenu,
   DashboardContentTable,
   DashboardPageContent,
-  DashboardInsider
+  DashboardInsider,
+  Drawer,
+  DrawerSuspense,
 };