fix(invoice): Skeleton warehouses & branch loading & style action top bar.

src/components/CustomSelectList.js

@@ -1,10 +1,13 @@
 import React from 'react';
+import styled from 'styled-components';
 import {
   Button,
   MenuItem,
   PopoverInteractionKind,
   Position,
+  Classes,
 } from '@blueprintjs/core';
+import clsx from 'classnames';
 import { defaultTo } from 'lodash';
 import { Select } from '@blueprintjs/select';
 import { FormattedMessage as T, Icon } from 'components';
@@ -18,7 +21,8 @@ export default function CustomSelectList({
   items,
   initialItemId,
   selectedItemId,
-  text,
+  loading = false,
+  defaultSelectText,
   onItemSelected,
   buttonProps,
 }) {
@@ -85,17 +89,19 @@ export default function CustomSelectList({
           offset: { offset: '0, 4' },
         },
       }}
+      className={clsx({ [Classes.SKELETON]: loading })}
     >
       <Button
         text={
           selecetedItem
-            ? `${text}:${selecetedItem.name} ${defaultTo(
+            ? `${defaultSelectText}:${selecetedItem.name} ${defaultTo(
                 selecetedItem.code,
                 '',
               )}`
-            : `${text}: Bigcapital`
+            : `${defaultSelectText}: Bigcapital`
         }
         minimal={true}
+        small={true}
         {...buttonProps}
       />
     </Select>

src/containers/Sales/Invoices/InvoiceForm/BaseCurrency.js

@@ -13,7 +13,7 @@ function BaseCurrency({
   organization: { base_currency },
   isForeignCustomer,
 }) {
-  console.log(isForeignCustomer, 'XXXX');
+  
   if (isForeignCustomer) {
     return null;
   }

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormTopBar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 import {
   Alignment,
   Navbar,
@@ -18,7 +18,8 @@ import { useInvoiceFormContext } from './InvoiceFormProvider';
 import { Features } from 'common';
 
 export default function InvoiceFormTopBar() {
-  const { warehouses, branches } = useInvoiceFormContext();
+  const { branches, warehouses, isWarehouesLoading, isBranchesLoading } =
+    useInvoiceFormContext();
 
   const { featureCan } = useFeatureCan();
 
@@ -30,42 +31,44 @@ export default function InvoiceFormTopBar() {
     <Navbar className={'navbar--dashboard-topbar'}>
       <NavbarGroup align={Alignment.LEFT}>
         <FeatureCan feature={Features.Warehouses}>
-          <FastField name={'branch_id'}>
+          <Field name={'branch_id'}>
             {({ form, field: { value }, meta: { error, touched } }) => (
               <CustomSelectList
                 items={branches}
-                text={'Branch'}
+                loading={isBranchesLoading}
+                defaultSelectText={'Branch'}
                 onItemSelected={({ id }) => {
                   form.setFieldValue('branch_id', id);
                 }}
                 selectedItemId={value}
                 buttonProps={{
-                  icon: <Icon icon={'branch-16'} iconSize={20} />,
+                  icon: <Icon icon={'branch-16'} iconSize={16} />,
                 }}
               />
             )}
-          </FastField>
+          </Field>
         </FeatureCan>
 
         {featureCan(Features.Warehouses) && featureCan(Features.Branches) && (
           <NavbarDivider />
         )}
         <FeatureCan feature={Features.Warehouses}>
-          <FastField name={'warehouse_id'}>
+          <Field name={'warehouse_id'}>
             {({ form, field: { value }, meta: { error, touched } }) => (
               <CustomSelectList
                 items={warehouses}
-                text={'Warehosue'}
+                loading={isWarehouesLoading}
+                defaultSelectText={'Warehosue'}
                 onItemSelected={({ id }) => {
                   form.setFieldValue('warehouse_id', id);
                 }}
                 selectedItemId={value}
                 buttonProps={{
-                  icon: <Icon icon={'warehouse-16'} iconSize={20} />,
+                  icon: <Icon icon={'warehouse-16'} iconSize={16} />,
                 }}
               />
             )}
-          </FastField>
+          </Field>
         </FeatureCan>
       </NavbarGroup>
     </Navbar>

src/style/pages/Dashboard/Dashboard.scss

@@ -575,17 +575,19 @@ $dashboard-views-bar-height: 44px;
 .navbar--dashboard-topbar {
   box-shadow: 0 0 0;
   border-bottom: 1px solid #d2dce2;
-  /* height: 44px; */
+  height: 35px;
-  height: 37px;
   padding: 0 20px;
 
   .bp3-navbar-group {
-    height: 37px;
+    height: 35px;
   }
 
   .bp3-navbar-divider {
     border-left-color: #d2dce2;
   }
+  .bp3-skeleton {
+    max-height: 10px;
+  }
   .bp3-button {
     &:hover {
       background: rgba(167, 182, 194, 0.12);