From 5eda10760cb666cc6094aaa87638fdea529eb268 Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Wed, 15 Apr 2026 22:01:33 +0530
Subject: [PATCH] Fix navbar folder opening lag by deferring navigation until
 expand animation completes (#19686)

### Before


https://github.com/user-attachments/assets/7d57aa55-8d4c-43e1-8835-f40206e5e453



### After


https://github.com/user-attachments/assets/2457c8ee-fcb9-41ae-a8f7-08f8c7b4a233

---------

Co-authored-by: Etienne <45695613+etiennejouan@users.noreply.github.com>
---
 .../folder/components/NavigationMenuItemFolderLayout.tsx   | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderLayout.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderLayout.tsx
index b14afe258e..a014dae391 100644
--- a/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderLayout.tsx
+++ b/packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderLayout.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { useState, type ReactNode } from 'react';
+import { useDeferredValue, useState, type ReactNode } from 'react';
 import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 
 import { NavigationDrawerItemsCollapsableContainer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer';
@@ -25,12 +25,15 @@ export const NavigationMenuItemFolderLayout = ({
 }: NavigationMenuItemFolderLayoutProps) => {
   const [skipInitialExpandAnimation] = useState(() => isOpen);
 
+  const deferredIsOpen = useDeferredValue(isOpen);
+  const isExpandedForAnimation = isOpen ? deferredIsOpen : false;
+
   return (
     <NavigationDrawerItemsCollapsableContainer isGroup={isGroup}>
       {header}
       <StyledFolderExpandableWrapper>
         <AnimatedExpandableContainer
-          isExpanded={isOpen}
+          isExpanded={isExpandedForAnimation}
           dimension="height"
           mode="fit-content"
           containAnimation