diff --git a/client/src/components/Drawer/Drawer.js b/client/src/components/Drawer/Drawer.js
new file mode 100644
index 000000000..e0c46b331
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client/src/components/Drawer/DrawerSuspense.js b/client/src/components/Drawer/DrawerSuspense.js
new file mode 100644
index 000000000..3c3141016
--- /dev/null
+++ b/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>;
+}
diff --git a/client/src/components/DrawersContainer.js b/client/src/components/DrawersContainer.js
index 6ec0527c1..96d8643cc 100644
--- a/client/src/components/DrawersContainer.js
+++ b/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>
   );
 }
diff --git a/client/src/components/index.js b/client/src/components/index.js
index 19befa37f..b49d57602 100644
--- a/client/src/components/index.js
+++ b/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,
 };
diff --git a/client/src/containers/Drawers/DrawerTemplate.js b/client/src/containers/Drawers/DrawerTemplate.js
deleted file mode 100644
index 2f9799009..000000000
--- a/client/src/containers/Drawers/DrawerTemplate.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
-import { Position, Drawer } from '@blueprintjs/core';
-
-export default function DrawerTemplate({
-  children,
-  isOpen,
-  isClose,
-  drawerProps,
-}) {
-  return (
-    <div>
-      <Drawer
-        isOpen={isOpen}
-        usePortal={false}
-        hasBackdrop={true}
-        title={<T id={'view_paper'} />}
-        position={Position.RIGHT}
-        canOutsideClickClose={true}
-        canEscapeKeyClose={true}
-        size={'65%'}
-        onClose={isClose}
-        {...drawerProps}
-      >
-        {children}
-      </Drawer>
-    </div>
-  );
-}
diff --git a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
index 5ada55f73..413e36d44 100644
--- a/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
+++ b/client/src/containers/Sales/Estimates/EstimateDetails/EstimateDrawer.js
@@ -1,11 +1,14 @@
-import React from 'react';
-import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
-import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
+import React, { lazy } from 'react';
 import withDrawers from 'containers/Drawer/withDrawers';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
+import { Drawer, DrawerSuspense } from 'components';
 import { compose } from 'utils';
 
+const EstimateDrawerContent = lazy(() =>
+  import('containers/Drawers/PaperTemplate/PaperTemplate'),
+);
+
 function EstimateDrawer({
   name,
   //#withDrawer
@@ -18,12 +21,12 @@ function EstimateDrawer({
   const handleDrawerClose = () => {
     closeDrawer(name);
   };
-  
-
   return (
-    <DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
-      <PaperTemplate  />
-    </DrawerTemplate>
+    <Drawer isOpen={isOpen} isClose={handleDrawerClose}>
+      <DrawerSuspense>
+        <EstimateDrawerContent />
+      </DrawerSuspense>
+    </Drawer>
   );
 }
 
diff --git a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
index ffeadb9e3..b7369eedc 100644
--- a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
+++ b/client/src/containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer.js
@@ -1,11 +1,17 @@
-import React from 'react';
-import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
-import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
+import React, { lazy } from 'react';
 import withDrawers from 'containers/Drawer/withDrawers';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
+import { Drawer, DrawerSuspense } from 'components';
 import { compose } from 'utils';
 
+const InvoicesDrawerContent = lazy(() =>
+  import('containers/Drawers/PaperTemplate/PaperTemplate'),
+);
+
+/**
+ *  invoice drawer.
+ */
 function InvoiceDrawer({
   name,
   //#withDrawer
@@ -32,9 +38,11 @@ function InvoiceDrawer({
   };
 
   return (
-    <DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
-      <PaperTemplate labels={propLabels.labels} />
-    </DrawerTemplate>
+    <Drawer isOpen={isOpen} isClose={handleDrawerClose}>
+      <DrawerSuspense>
+        <InvoicesDrawerContent labels={propLabels.labels} />
+      </DrawerSuspense>
+    </Drawer>
   );
 }
 
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js
index 974926d40..747085e55 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer.js
@@ -1,11 +1,17 @@
-import React from 'react';
-import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
-import PaymentPaperTemplate from 'containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate';
+import React, { lazy } from 'react';
 import withDrawers from 'containers/Drawer/withDrawers';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import { Drawer, DrawerSuspense } from 'components';
 
 import { compose } from 'utils';
 
+const PaymentReceiveDrawerContent = lazy(() =>
+  import('containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate'),
+);
+
+/**
+ *  payment receive drawer.
+ */
 function PaymentReceiveDrawer({
   name,
   //#withDrawer
@@ -20,9 +26,11 @@ function PaymentReceiveDrawer({
   };
 
   return (
-    <DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
-      <PaymentPaperTemplate />
-    </DrawerTemplate>
+    <Drawer isOpen={isOpen} isClose={handleDrawerClose}>
+      <DrawerSuspense>
+        <PaymentReceiveDrawerContent />
+      </DrawerSuspense>
+    </Drawer>
   );
 }
 
diff --git a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js
index 3c1d3079e..e8308f0ea 100644
--- a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js
+++ b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js
@@ -1,11 +1,17 @@
-import React from 'react';
-import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
-import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
+import React, { lazy } from 'react';
 import withDrawers from 'containers/Drawer/withDrawers';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
+import { Drawer, DrawerSuspense } from 'components';
 import { compose } from 'utils';
 
+const ReceiptDrawerContent = lazy(() =>
+  import('containers/Drawers/PaperTemplate/PaperTemplate'),
+);
+
+/**
+ *  receipt drawer.
+ */
 const ReceiptDrawer = ({
   name,
   //#withDrawer
@@ -33,9 +39,11 @@ const ReceiptDrawer = ({
 
   return (
     <div>
-      <DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
-        <PaperTemplate labels={propLabels.labels} />
-      </DrawerTemplate>
+      <Drawer isOpen={isOpen} isClose={handleDrawerClose}>
+        <DrawerSuspense>
+          <ReceiptDrawerContent labels={propLabels.labels} />
+        </DrawerSuspense>
+      </Drawer>
     </div>
   );
 };