BIG-19 fix: scrollable area on details drawer.

client/src/components/Drawer/DrawerSuspense.js

@@ -1,12 +1,11 @@
 import React, { Suspense } from 'react';
-import { Spinner, Classes } from '@blueprintjs/core';
+import { DrawerLoading } from 'components';
 
+/**
+ * Loading content.
+ */
 function LoadingContent() {
-  return (
-    <div className={Classes.DRAWER_BODY}>
-      <Spinner size={30} />
-    </div>
-  );
+  return <DrawerLoading loading={true} />;
 }
 
 export default function DrawerSuspense({ children }) {

client/src/components/Drawer/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Classes } from '@blueprintjs/core';
+import LoadingIndicator from 'components/LoadingIndicator';
+
+export function DrawerLoading({ loading, mount = false, children }) {
+  return (
+    <LoadingIndicator loading={loading} mount={mount}>
+      {children}
+    </LoadingIndicator>
+  );
+}
+
+export function DrawerBody({ children }) {
+  return <div className={Classes.DRAWER_BODY}>{children}</div>;
+}

client/src/components/DrawersContainer.js

@@ -25,7 +25,7 @@ export default function DrawersContainer() {
       <AccountDrawer name={DRAWERS.ACCOUNT_DRAWER} />
       <ManualJournalDrawer name={DRAWERS.JOURNAL_DRAWER} />
       <ExpenseDrawer name={DRAWERS.EXPENSE_DRAWER} />
-      <BillDrawer name={'bill-drawer'} />
+      <BillDrawer name={DRAWERS.BILL_DRAWER} />
       <InvoiceDetailDrawer name={'invoice-detail-drawer'} />
       <EstimateDetailDrawer name={'estimate-detail-drawer'} />
       <ReceiptDetailDrawer name={'receipt-detail-drawer'} />

client/src/components/index.js

@@ -75,6 +75,7 @@ export * from './TotalLines/index'
 export * from './Alert';
 export * from './Subscriptions';
 export * from './Dashboard';
+export * from './Drawer';
 
 const Hint = FieldHint;