BIG-126: async localization loaded data failed to be injected to application.

src/components/AppIntlLoader.js

@@ -9,7 +9,7 @@ import * as R from 'ramda';
 import { AppIntlProvider } from './AppIntlProvider';
 import { useSplashLoading } from '../hooks/state';
 
-import { useWatch } from '../hooks';
+import { useWatchImmediate } from '../hooks';
 import withDashboardActions from '../containers/Dashboard/withDashboardActions';
 
 const SUPPORTED_LOCALES = [
@@ -90,10 +90,10 @@ function useAppLoadLocales(currentLocale) {
   }, [currentLocale, stopLoading]);
 
   // Watches the value to start/stop splash screen.
-  useWatch(isLoading, (value) => (value ? startLoading() : stopLoading()), {
-    immediate: true,
-  });
-
+  useWatchImmediate(
+    (value) => (value ? startLoading() : stopLoading()),
+    isLoading,
+  );
   return { isLoading };
 }
 
@@ -116,10 +116,10 @@ function useAppYupLoadLocales(currentLocale) {
   }, [currentLocale, stopLoading]);
 
   // Watches the valiue to start/stop splash screen.
-  useWatch(isLoading, (value) => (value ? startLoading() : stopLoading()), {
-    immediate: true,
-  });
-
+  useWatchImmediate(
+    (value) => (value ? startLoading() : stopLoading()),
+    isLoading,
+  );
   return { isLoading };
 }
 
@@ -144,7 +144,7 @@ function AppIntlLoader({ children }) {
   const { isLoading: isAppLocalesLoading } = useAppLoadLocales(currentLocale);
 
   // Detarmines whether the app locales loading.
-  const isLoading = isAppYupLocalesLoading && isAppLocalesLoading;
+  const isLoading = isAppYupLocalesLoading || isAppLocalesLoading;
 
   return (
     <AppIntlProvider currentLocale={currentLocale} isRTL={isRTL}>

src/components/Dashboard/DashboardBoot.js

@@ -3,7 +3,7 @@ import * as R from 'ramda';
 
 import { useUser, useCurrentOrganization } from '../../hooks/query';
 import { useSplashLoading } from '../../hooks/state';
-import { useWatch, useWhen } from '../../hooks';
+import { useWatch, useWatchImmediate, useWhen } from '../../hooks';
 
 import withAuthentication from '../../containers/Authentication/withAuthentication';
 
@@ -21,10 +21,8 @@ function DashboardBootJSX({ authenticatedUserId }) {
   } = useCurrentOrganization();
 
   // Authenticated user.
-  const {
-    isSuccess: isAuthUserSuccess,
-    isLoading: isAuthUserLoading,
-  } = useUser(authenticatedUserId);
+  const { isSuccess: isAuthUserSuccess, isLoading: isAuthUserLoading } =
+    useUser(authenticatedUserId);
 
   // Initial locale cookie value.
   const localeCookie = getCookie('locale');
@@ -59,25 +57,25 @@ function DashboardBootJSX({ authenticatedUserId }) {
 
   // Splash loading when organization request loading and
   // applicaiton still not booted.
-  useWatch(isOrgLoading, (value) => {
+  useWatchImmediate((value) => {
     value && !isBooted.current && startLoading();
-  });
+  }, isOrgLoading);
 
-  // Splash loading when request authenticated user loading and 
+  // Splash loading when request authenticated user loading and
   // application still not booted yet.
-  useWatch(isAuthUserLoading, (value) => {
+  useWatchImmediate((value) => {
     value && !isBooted.current && startLoading();
-  });  
+  }, isAuthUserLoading);
 
   // Stop splash loading once organization request success.
-  useWatch(isCurrentOrganizationSuccess, (value) => {
+  useWatch((value) => {
     value && stopLoading();
-  });
+  }, isCurrentOrganizationSuccess);
 
   // Stop splash loading once authenticated user request success.
-  useWatch(isAuthUserSuccess, (value) => {
+  useWatch((value) => {
     value && stopLoading();
-  });
+  }, isAuthUserSuccess);
 
   // Once the all requests complete change the app loading state.
   useWhen(