From 418ba4b2f9881de632afbe2be42eb75a574338cc Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 31 Mar 2026 12:17:22 +0200
Subject: [PATCH] fix animation drawer animation

---
 .../components/AppNavigationDrawer.tsx        | 30 ++++++++++++++-----
 ...er.tsx => MainNavigationDrawerContent.tsx} | 12 ++------
 .../MainNavigationDrawerScrollableItems.tsx   | 26 +++-------------
 ...sx => SettingsNavigationDrawerContent.tsx} | 11 ++-----
 4 files changed, 33 insertions(+), 46 deletions(-)
 rename packages/twenty-front/src/modules/navigation/components/{MainNavigationDrawer.tsx => MainNavigationDrawerContent.tsx} (75%)
 rename packages/twenty-front/src/modules/navigation/components/{SettingsNavigationDrawer.tsx => SettingsNavigationDrawerContent.tsx} (81%)

diff --git a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx
index 1b15fbbc138..13f3194c497 100644
--- a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx
+++ b/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>
   );
 };
diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerContent.tsx
similarity index 75%
rename from packages/twenty-front/src/modules/navigation/components/MainNavigationDrawer.tsx
rename to packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerContent.tsx
index 839402e8864..1a8142e5969 100644
--- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawer.tsx
+++ b/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>
+    </>
   );
 };
diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx
index cffe96eca2d..eda3145718c 100644
--- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx
+++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx
@@ -1,28 +1,12 @@
 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 { 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;
@@ -33,10 +17,8 @@ export const MainNavigationDrawerScrollableItems = () => {
   return (
     <StyledScrollableItemsContainer>
       <NavigationDrawerOpenedSection />
-      <Suspense fallback={<NavigationDrawerWorkspaceSectionSkeletonLoader />}>
-        <FavoritesSectionDispatcher />
-        <WorkspaceSectionDispatcher />
-      </Suspense>
+      <FavoritesSectionDispatcher />
+      <WorkspaceSectionDispatcher />
       <NavigationDrawerOtherSection />
     </StyledScrollableItemsContainer>
   );
diff --git a/packages/twenty-front/src/modules/navigation/components/SettingsNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/SettingsNavigationDrawerContent.tsx
similarity index 81%
rename from packages/twenty-front/src/modules/navigation/components/SettingsNavigationDrawer.tsx
rename to packages/twenty-front/src/modules/navigation/components/SettingsNavigationDrawerContent.tsx
index 36a149dc806..d01c91926ae 100644
--- a/packages/twenty-front/src/modules/navigation/components/SettingsNavigationDrawer.tsx
+++ b/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>
+    </>
   );
 };