feat(FinancialReports): add loading progress bar.

fix(preformance): Optimize preformance of virtualized list.
fix(preformance): Optimize financial reports preformance.

client/src/components/Dashboard/Dashboard.js

@@ -4,8 +4,6 @@ import { useQuery } from 'react-query';
 
 import 'style/pages/Dashboard/Dashboard.scss';
 
-import DashboardLoadingIndicator from './DashboardLoadingIndicator';
-
 import Sidebar from 'components/Sidebar/Sidebar';
 import DashboardContent from 'components/Dashboard/DashboardContent';
 import DialogsContainer from 'components/DialogsContainer';
@@ -13,22 +11,15 @@ import PreferencesPage from 'components/Preferences/PreferencesPage';
 import Search from 'containers/GeneralSearch/Search';
 import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
 import GlobalHotkeys from './GlobalHotkeys';
-import withSettingsActions from 'containers/Settings/withSettingsActions';
+import DashboardProvider from './DashboardProvider';
 import DrawersContainer from 'components/DrawersContainer';
 
-import { compose } from 'utils';
-
 /**
  * Dashboard page.
  */
-function Dashboard({
-  // #withSettings
-  requestFetchOptions,
-}) {
-  const fetchOptions = useQuery(['options'], () => requestFetchOptions());
-
+export default function Dashboard() {
   return (
-    <DashboardLoadingIndicator isLoading={fetchOptions.isFetching}>
+    <DashboardProvider>
       <Switch>
         <Route path="/preferences">
           <DashboardSplitPane>
@@ -49,8 +40,6 @@ function Dashboard({
       <DialogsContainer />
       <GlobalHotkeys />
       <DrawersContainer />
-    </DashboardLoadingIndicator>
+    </DashboardProvider>
   );
-} 
-
-export default compose(withSettingsActions)(Dashboard);
+}

client/src/components/Dashboard/DashboardLoadingIndicator.js

@@ -10,7 +10,7 @@ export default function DashboardLoadingIndicator({
   className,
   children,
 }) {
-  return (  
+  return (
     <Choose>
       <Choose.When condition={isLoading}>
         <BigcapitalLoading />        

client/src/components/Dashboard/DashboardProvider.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import DashboardLoadingIndicator from './DashboardLoadingIndicator';
+import { useSettings } from 'hooks/query';
+
+/**
+ * Dashboard provider.
+ */
+export default function DashboardProvider({ children }) {
+  const { isLoading } = useSettings();
+
+  return (
+    <DashboardLoadingIndicator isLoading={isLoading}>
+      { children }
+    </DashboardLoadingIndicator>
+  )
+}

client/src/components/Dashboard/PrivatePages.js

@@ -1,46 +1,21 @@
 import React from 'react';
 import { Switch, Route } from 'react-router';
-import { useQuery } from 'react-query';
 
 import Dashboard from 'components/Dashboard/Dashboard';
 import SetupWizardPage from 'containers/Setup/WizardSetupPage';
-import DashboardLoadingIndicator from 'components/Dashboard/DashboardLoadingIndicator';
-
-import withOrganizationActions from 'containers/Organization/withOrganizationActions';
-import withSubscriptionsActions from 'containers/Subscriptions/withSubscriptionsActions';
 
 import EnsureOrganizationIsReady from 'components/Guards/EnsureOrganizationIsReady';
 import EnsureOrganizationIsNotReady from 'components/Guards/EnsureOrganizationIsNotReady';
-
-import { compose } from 'utils';
+import { PrivatePagesProvider } from './PrivatePagesProvider';
 
 import 'style/pages/Dashboard/Dashboard.scss';
 
 /**
  * Dashboard inner private pages.
  */
-function DashboardPrivatePages({
-  // #withOrganizationActions
-  requestAllOrganizations,
-
-  // #withSubscriptionsActions
-  requestFetchSubscriptions,
-}) {
-  // Fetches all user's organizatins.
-  const fetchOrganizations = useQuery(
-    ['organizations'], () => requestAllOrganizations(),
-  );
-
-  // Fetches organization subscriptions.
-  const fetchSuscriptions = useQuery(
-    ['susbcriptions'], () => requestFetchSubscriptions(),
-  )
-
+export default function DashboardPrivatePages() {
   return (
-    <DashboardLoadingIndicator isLoading={
-      fetchOrganizations.isFetching ||
-      fetchSuscriptions.isFetching
-    }>
+    <PrivatePagesProvider>
       <Switch>
         <Route path={'/setup'}>
           <EnsureOrganizationIsNotReady>
@@ -54,11 +29,6 @@ function DashboardPrivatePages({
           </EnsureOrganizationIsReady>
         </Route>
       </Switch>
-    </DashboardLoadingIndicator>
+    </PrivatePagesProvider>
   );
-}
-
-export default compose(
-  withOrganizationActions,
-  withSubscriptionsActions,
-)(DashboardPrivatePages);
+}

client/src/components/Dashboard/PrivatePagesProvider.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import DashboardLoadingIndicator from 'components/Dashboard/DashboardLoadingIndicator';
+import { useCurrentOrganization } from '../../hooks/query/organization';
+
+/**
+ * Private pages provider.
+ */
+export function PrivatePagesProvider({ children }) {
+  // Fetches the current user's organization.
+  const { isLoading } = useCurrentOrganization();
+
+  return (
+    <DashboardLoadingIndicator isLoading={isLoading}>
+      {children}
+    </DashboardLoadingIndicator>
+  )
+}