add skeleton when navigation drawer state is loading

packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx

@@ -1,7 +1,10 @@
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { MainNavigationDrawerContent } from '@/navigation/components/MainNavigationDrawerContent';
+import { SettingsNavigationDrawerContent } from '@/navigation/components/SettingsNavigationDrawerContent';
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
-
-import { MainNavigationDrawer } from '@/navigation/components/MainNavigationDrawer';
-import { SettingsNavigationDrawer } from '@/navigation/components/SettingsNavigationDrawer';
+import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { useLingui } from '@lingui/react/macro';
 
 export type AppNavigationDrawerProps = {
   className?: string;
@@ -11,10 +14,23 @@ export const AppNavigationDrawer = ({
   className,
 }: AppNavigationDrawerProps) => {
   const isSettingsDrawer = useIsSettingsDrawer();
+  const { t } = useLingui();
+  const currentWorkspace = useAtomStateValue(currentWorkspaceState);
 
-  return isSettingsDrawer ? (
-    <SettingsNavigationDrawer className={className} />
-  ) : (
-    <MainNavigationDrawer className={className} />
+  return (
+    <NavigationDrawer
+      className={className}
+      title={
+        isSettingsDrawer
+          ? t`Exit Settings`
+          : (currentWorkspace?.displayName ?? '')
+      }
+    >
+      {isSettingsDrawer ? (
+        <SettingsNavigationDrawerContent />
+      ) : (
+        <MainNavigationDrawerContent />
+      )}
+    </NavigationDrawer>
   );
 };

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerContent.tsx

@@ -1,25 +1,19 @@
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { NavigationDrawerAIChatContent } from '@/ai/components/NavigationDrawerAIChatContent';
 import { MainNavigationDrawerNavigationContent } from '@/navigation/components/MainNavigationDrawerNavigationContent';
 import { MainNavigationDrawerTabsRow } from '@/navigation/components/MainNavigationDrawerTabsRow';
-import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
 import { NavigationDrawerFixedContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent';
 import { NavigationDrawerScrollableContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent';
 import { navigationDrawerActiveTabState } from '@/ui/navigation/states/navigationDrawerActiveTabState';
 import { NAVIGATION_DRAWER_TABS } from '@/ui/navigation/states/navigationDrawerTabs';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 
-export const MainNavigationDrawer = ({ className }: { className?: string }) => {
+export const MainNavigationDrawerContent = () => {
   const navigationDrawerActiveTab = useAtomStateValue(
     navigationDrawerActiveTabState,
   );
-  const currentWorkspace = useAtomStateValue(currentWorkspaceState);
 
   return (
-    <NavigationDrawer
-      className={className}
-      title={currentWorkspace?.displayName ?? ''}
-    >
+    <>
       <NavigationDrawerFixedContent>
         <MainNavigationDrawerTabsRow />
       </NavigationDrawerFixedContent>
@@ -32,6 +26,6 @@ export const MainNavigationDrawer = ({ className }: { className?: string }) => {
           <MainNavigationDrawerNavigationContent />
         )}
       </NavigationDrawerScrollableContent>
-    </NavigationDrawer>
+    </>
   );
 };

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx

@@ -1,28 +1,14 @@
+import { metadataStoreState } from '@/metadata-store/states/metadataStoreState';
 import { NavigationDrawerOpenedSection } from '@/navigation-menu-item/display/sections/components/NavigationDrawerOpenedSection';
-import { NavigationDrawerWorkspaceSectionSkeletonLoader } from '@/object-metadata/components/NavigationDrawerWorkspaceSectionSkeletonLoader';
-
+import { FavoritesSectionDispatcher } from '@/navigation-menu-item/display/sections/favorites/components/FavoritesSectionDispatcher';
+import { WorkspaceSectionDispatcher } from '@/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionDispatcher';
 import { NavigationDrawerOtherSection } from '@/navigation/components/NavigationDrawerOtherSection';
+import { NavigationDrawerWorkspaceSectionSkeletonLoader } from '@/object-metadata/components/NavigationDrawerWorkspaceSectionSkeletonLoader';
+import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
 import { styled } from '@linaria/react';
-import { lazy, Suspense } from 'react';
 
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
-const FavoritesSectionDispatcher = lazy(() =>
-  import(
-    '@/navigation-menu-item/display/sections/favorites/components/FavoritesSectionDispatcher'
-  ).then((module) => ({
-    default: module.FavoritesSectionDispatcher,
-  })),
-);
-
-const WorkspaceSectionDispatcher = lazy(() =>
-  import(
-    '@/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionDispatcher'
-  ).then((module) => ({
-    default: module.WorkspaceSectionDispatcher,
-  })),
-);
-
 const StyledScrollableItemsContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -30,13 +16,24 @@ const StyledScrollableItemsContainer = styled.div`
 `;
 
 export const MainNavigationDrawerScrollableItems = () => {
+  const metadataStore = useAtomFamilyStateValue(
+    metadataStoreState,
+    'navigationMenuItems',
+  );
+
+  const isNavigationMenuItemsLoading = metadataStore.status === 'empty';
+
   return (
     <StyledScrollableItemsContainer>
       <NavigationDrawerOpenedSection />
-      <Suspense fallback={<NavigationDrawerWorkspaceSectionSkeletonLoader />}>
-        <FavoritesSectionDispatcher />
-        <WorkspaceSectionDispatcher />
-      </Suspense>
+      {isNavigationMenuItemsLoading ? (
+        <NavigationDrawerWorkspaceSectionSkeletonLoader />
+      ) : (
+        <>
+          <FavoritesSectionDispatcher />
+          <WorkspaceSectionDispatcher />
+        </>
+      )}
       <NavigationDrawerOtherSection />
     </StyledScrollableItemsContainer>
   );

packages/twenty-front/src/modules/navigation/components/SettingsNavigationDrawerContent.tsx

@@ -1,5 +1,4 @@
 import { SettingsNavigationDrawerItems } from '@/settings/components/SettingsNavigationDrawerItems';
-import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
 import { NavigationDrawerFixedContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent';
 import { NavigationDrawerScrollableContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent';
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
@@ -7,18 +6,14 @@ import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useLingui } from '@lingui/react/macro';
 import { AdvancedSettingsToggle } from 'twenty-ui/navigation';
 
-export const SettingsNavigationDrawer = ({
-  className,
-}: {
-  className?: string;
-}) => {
+export const SettingsNavigationDrawerContent = () => {
   const { t } = useLingui();
   const [isAdvancedModeEnabled, setIsAdvancedModeEnabled] = useAtomState(
     isAdvancedModeEnabledState,
   );
 
   return (
-    <NavigationDrawer className={className} title={t`Exit Settings`}>
+    <>
       <NavigationDrawerScrollableContent>
         <SettingsNavigationDrawerItems />
       </NavigationDrawerScrollableContent>
@@ -30,6 +25,6 @@ export const SettingsNavigationDrawer = ({
           label={t`Advanced:`}
         />
       </NavigationDrawerFixedContent>
-    </NavigationDrawer>
+    </>
   );
 };