Fix dashboard animations (#17389)

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx

@@ -26,6 +26,7 @@ import { WidgetPlaceholder } from '@/page-layout/widgets/components/WidgetPlaceh
 import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useMemo, useRef } from 'react';
 import {
@@ -37,7 +38,7 @@ import {
 } from 'react-grid-layout';
 import { isDefined } from 'twenty-shared/utils';
 
-const StyledGridContainer = styled.div`
+const StyledGridContainer = styled.div<{ $disableTransitions: boolean }>`
   box-sizing: border-box;
   flex: 1;
   min-height: 100%;
@@ -67,6 +68,22 @@ const StyledGridContainer = styled.div`
   .react-grid-item:hover .widget-card-resize-handle {
     display: block !important;
   }
+
+  ${({ $disableTransitions }) =>
+    $disableTransitions &&
+    css`
+      .react-grid-layout {
+        transition: none !important;
+      }
+
+      .react-grid-item {
+        transition: none !important;
+      }
+
+      .react-grid-item.cssTransforms {
+        transition-property: none !important;
+      }
+    `}
 `;
 
 type ExtendedResponsiveProps = ResponsiveProps & {
@@ -120,6 +137,9 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => {
   const pageLayoutDraggedArea = useRecoilComponentValue(
     pageLayoutDraggedAreaComponentState,
   );
+  const draggingWidgetId = useRecoilComponentValue(
+    pageLayoutDraggingWidgetIdComponentState,
+  );
 
   const activeTab = usePageLayoutTabWithVisibleWidgetsOrThrow(tabId);
 
@@ -147,8 +167,13 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => {
     [activeTabWidgets, hasPendingPlaceholder],
   );
 
+  const shouldDisableTransitions = !isDefined(draggingWidgetId);
+
   return (
-    <StyledGridContainer ref={gridContainerRef}>
+    <StyledGridContainer
+      ref={gridContainerRef}
+      $disableTransitions={shouldDisableTransitions}
+    >
       {isPageLayoutInEditMode && (
         <>
           <PageLayoutGridOverlay />