diff --git a/src/components/Dashboard/DashboardBoot.js b/src/components/Dashboard/DashboardBoot.js index 738c45115..095a972cc 100644 --- a/src/components/Dashboard/DashboardBoot.js +++ b/src/components/Dashboard/DashboardBoot.js @@ -1,5 +1,4 @@ import React from 'react'; -import * as R from 'ramda'; import { useAuthenticatedAccount, useCurrentOrganization, @@ -10,9 +9,9 @@ import { useWatch, useWatchImmediate, useWhen } from '../../hooks'; import { setCookie, getCookie } from '../../utils'; /** - * Boots dashboard meta. + * Dashboard meta async booting. */ -function useDashboardMetaBoot() { +export function useDashboardMetaBoot() { const { data: dashboardMeta, isLoading: isDashboardMetaLoading, @@ -20,7 +19,7 @@ function useDashboardMetaBoot() { } = useDashboardMeta(); const [startLoading, stopLoading] = useSplashLoading(); - + useWatchImmediate((value) => { value && startLoading(); }, isDashboardMetaLoading); @@ -28,12 +27,26 @@ function useDashboardMetaBoot() { useWatchImmediate(() => { isDashboardMetaSuccess && stopLoading(); }, isDashboardMetaSuccess); + + return { + isLoading: isDashboardMetaLoading, + }; } /** * Dashboard async booting. + * @returns {{ isLoading: boolean }} */ -export function DashboardBoot({ authenticatedUserId }) { +export function useDashboardBoot() { + const { isLoading } = useDashboardMetaBoot(); + + return { isLoading }; +} + +/** + * Application async booting. + */ +export function useApplicationBoot() { // Fetches the current user's organization. const { isSuccess: isCurrentOrganizationSuccess, @@ -45,8 +58,6 @@ export function DashboardBoot({ authenticatedUserId }) { const { isSuccess: isAuthUserSuccess, isLoading: isAuthUserLoading } = useAuthenticatedAccount(); - useDashboardMetaBoot(); - // Initial locale cookie value. const localeCookie = getCookie('locale'); @@ -109,5 +120,8 @@ export function DashboardBoot({ authenticatedUserId }) { isBooted.current = true; }, ); - return null; + + return { + isLoading: isOrgLoading || isAuthUserLoading, + }; } diff --git a/src/components/Dashboard/DashboardProvider.js b/src/components/Dashboard/DashboardProvider.js index be0032e6b..b72160cf4 100644 --- a/src/components/Dashboard/DashboardProvider.js +++ b/src/components/Dashboard/DashboardProvider.js @@ -1,9 +1,16 @@ import React from 'react'; import { DashboardAbilityProvider } from '../../components'; +import { useDashboardBoot } from './DashboardBoot'; /** * Dashboard provider. */ export default function DashboardProvider({ children }) { - return {children}; + const { isLoading } = useDashboardBoot(); + + return ( + + {isLoading ? null : children} + + ); } diff --git a/src/components/Dashboard/PrivatePagesProvider.js b/src/components/Dashboard/PrivatePagesProvider.js index 3e9bcc1e6..2fb0eef6a 100644 --- a/src/components/Dashboard/PrivatePagesProvider.js +++ b/src/components/Dashboard/PrivatePagesProvider.js @@ -1,29 +1,15 @@ import React from 'react'; -import * as R from 'ramda'; -import { DashboardBoot } from '../../components'; - -import withDashboard from '../../containers/Dashboard/withDashboard'; +import { useApplicationBoot } from '../../components'; /** * Private pages provider. */ -function PrivatePagesProviderComponent({ - splashScreenCompleted, - +export function PrivatePagesProvider({ // #ownProps children, }) { - return ( - - - {splashScreenCompleted ? children : null} - - ); -} + const { isLoading } = useApplicationBoot(); -export const PrivatePagesProvider = R.compose( - withDashboard(({ splashScreenCompleted }) => ({ - splashScreenCompleted, - })), -)(PrivatePagesProviderComponent); + return {!isLoading ? children : null}; +}