@antscorp/antsomi-ui 1.3.5-beta.566 → 1.3.5-beta.567

package/es/components/template/Layout/Layout.js

@@ -36,7 +36,6 @@ import { ChildrenWrapper, ContentWrapper, LayoutLoading, LayoutWrapper, Notifica
 import { LeftMenu } from '../../organism';
 import { Flex } from '../../atoms';
 import { HeaderV2, AccessDenied } from '../../molecules';
-import { RecommendationWorkspace } from './components';
 // Contexts
 import { AppConfigContext } from '../../..';
 // Constants
@@ -49,6 +48,7 @@ import { useLayoutStore } from './stores';
 import { hasSelectAccountPermission } from './utils';
 import { useCustomRouter, useDeepCompareEffect, useDeepCompareMemo, useMutationObserver, } from '@antscorp/antsomi-ui/es/hooks';
 import { HOME_MENU_ITEMS } from '../../organism/LeftMenu/constants';
+import { RecommendationWorkspace } from './components';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 export const Layout = memo(props => {
@@ -67,20 +67,18 @@ export const Layout = memo(props => {
     const params = useParams();
     const location = useLocation();
     const { navigate, replace } = useCustomRouter();
-    const [state, setState] = useState({
-        showAccountSelection: false,
-        noSpaceTopContent: false,
-        activeMenu: null,
-        activePageTitle: '',
-        isAccessDenied: false,
-        isLoadingLayout: true,
-    });
-    const { showAccountSelection, noSpaceTopContent, activeMenu, activePageTitle, isAccessDenied, isLoadingLayout, } = state;
+    const [showAccountSelection, setShowAccountSelection] = useState(false);
+    const [noSpaceTopContent, setNoSpaceTopContent] = useState(false);
+    const [activeMenu, setActiveMenu] = useState(null);
+    const [activePageTitle, setActivePageTitle] = useState('');
+    const [isAccessDenied, setIsAccessDenied] = useState(false);
+    const [isLoadingLayout, setLoadingLayout] = useState(true);
     const notificationWrapperRef = useRef(null);
+    const timeoutLoadingLayout = useRef(null);
     useMutationObserver(() => {
         if (notificationWrapperRef.current) {
             const child = notificationWrapperRef.current.querySelector('div');
-            setState(prev => (Object.assign(Object.assign({}, prev), { noSpaceTopContent: !!child })));
+            setNoSpaceTopContent(!!child);
         }
     }, notificationWrapperRef, {
         attributes: true,
@@ -148,14 +146,13 @@ export const Layout = memo(props => {
     const leftMenuAppConfig = useDeepCompareMemo(() => omit(Object.assign(Object.assign({}, appConfig), { permissionDomain }), ['setAppConfig']), [appConfig]);
     const antsProcessingNotificationConfig = useMemo(() => (Object.assign({ permissionDomain, socketDomain: SOCKET_API, token, accountId: userId, userId, lang: languageCode, networkId: portalId }, processingNotificationProps)), [permissionDomain, token, userId, languageCode, portalId, processingNotificationProps]);
     const onActiveMenuCodeChange = useCallback((activeItemPath, flattenPermissionList, menuListPermission) => {
+        var _a;
         const activeMenuItem = activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath[(activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath.length) - 1];
         const { menu_item_code, page_title, menu_item_name, permission_code } = activeMenuItem || {};
-        setState(prev => {
-            var _a;
-            return (Object.assign(Object.assign({}, prev), { activePageTitle: page_title
-                    ? i18nInstance.t((_a = translations.leftMenu.pageTitle) === null || _a === void 0 ? void 0 : _a[`${page_title}`]).toString()
-                    : menu_item_name, activeMenu: activeMenuItem }));
-        });
+        setActivePageTitle(page_title
+            ? i18nInstance.t((_a = translations.leftMenu.pageTitle) === null || _a === void 0 ? void 0 : _a[`${page_title}`]).toString()
+            : menu_item_name);
+        setActiveMenu(activeMenuItem);
         onActiveMenuChange === null || onActiveMenuChange === void 0 ? void 0 : onActiveMenuChange(menu_item_code);
         const hasRole = hasSelectAccountPermission({
             activeItemPath: cloneDeep(activeItemPath),
@@ -163,16 +160,25 @@ export const Layout = memo(props => {
             menuListPermission,
             appItem: activeItemPath[0],
         });
-        setState(prev => (Object.assign(Object.assign({}, prev), { showAccountSelection: hasRole })));
+        setShowAccountSelection(hasRole);
         // Check if the user has permission or not (access denied)
         if (!!permission_code &&
             !!activeMenuItem &&
             Array.isArray(flattenPermissionList) &&
-            flattenPermissionList.length) {
+            !!flattenPermissionList.length) {
             const isAccessDenied = !flattenPermissionList.some(item => item.menu_code === activeMenuItem.permission_code);
-            setState(prev => (Object.assign(Object.assign({}, prev), { isAccessDenied, isLoadingLayout: false })));
+            setIsAccessDenied(isAccessDenied);
+        }
+        // Handle set loading layout
+        if (timeoutLoadingLayout) {
+            clearTimeout(timeoutLoadingLayout.current);
         }
-    }, [onActiveMenuChange]);
+        timeoutLoadingLayout.current = setTimeout(() => {
+            if (isLoadingLayout) {
+                setLoadingLayout(false);
+            }
+        }, 500);
+    }, [isLoadingLayout, onActiveMenuChange]);
     // Effects
     /** Handle replace current userId in params if current userId is not match */
     useDeepCompareEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.566",
+  "version": "1.3.5-beta.567",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",