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 />

packages/twenty-front/src/modules/page-layout/widgets/graph/constants/ChartMotionConfig.ts

@@ -0,0 +1,8 @@
+export const CHART_MOTION_CONFIG = {
+  mass: 0.01,
+  tension: 2000,
+  friction: 100,
+  clamp: true,
+  precision: 0.01,
+  velocity: 10,
+};

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx

@@ -1,6 +1,7 @@
 import { GraphWidgetChartContainer } from '@/page-layout/widgets/graph/components/GraphWidgetChartContainer';
 import { GraphWidgetLegend } from '@/page-layout/widgets/graph/components/GraphWidgetLegend';
 import { NoDataLayer } from '@/page-layout/widgets/graph/components/NoDataLayer';
+import { CHART_MOTION_CONFIG } from '@/page-layout/widgets/graph/constants/ChartMotionConfig';
 import { CustomBarItem } from '@/page-layout/widgets/graph/graphWidgetBarChart/components/CustomBarItem';
 import { CustomSliceHoverLayer } from '@/page-layout/widgets/graph/graphWidgetBarChart/components/CustomSliceHoverLayer';
 import { CustomTotalsLayer } from '@/page-layout/widgets/graph/graphWidgetBarChart/components/CustomTotalsLayer';
@@ -377,6 +378,8 @@ export const GraphWidgetBarChart = ({
           }}
           indexScale={{ type: 'band', round: true }}
           colors={(datum) => getBarChartColor(datum, barConfigs, theme)}
+          animate
+          motionConfig={CHART_MOTION_CONFIG}
           layers={[
             'grid',
             'markers',

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx

@@ -1,3 +1,4 @@
+import { CHART_MOTION_CONFIG } from '@/page-layout/widgets/graph/constants/ChartMotionConfig';
 import { GraphWidgetLegend } from '@/page-layout/widgets/graph/components/GraphWidgetLegend';
 import { GraphWidgetTooltip } from '@/page-layout/widgets/graph/components/GraphWidgetTooltip';
 import { GaugeChartEndLine } from '@/page-layout/widgets/graph/graphWidgetGaugeChart/components/GaugeChartEndLine';
@@ -123,6 +124,8 @@ export const GraphWidgetGaugeChart = ({
           endAngle={90}
           innerRadius={0.7}
           padding={0.2}
+          animate
+          motionConfig={CHART_MOTION_CONFIG}
           enableTracks={false}
           enableRadialGrid={false}
           enableCircularGrid={false}

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx

@@ -1,3 +1,4 @@
+import { CHART_MOTION_CONFIG } from '@/page-layout/widgets/graph/constants/ChartMotionConfig';
 import { GraphWidgetChartContainer } from '@/page-layout/widgets/graph/components/GraphWidgetChartContainer';
 import { GraphWidgetLegend } from '@/page-layout/widgets/graph/components/GraphWidgetLegend';
 import { NoDataLayer } from '@/page-layout/widgets/graph/components/NoDataLayer';
@@ -296,6 +297,8 @@ export const GraphWidgetLineChart = ({
             bottom: margins.bottom,
             left: margins.left,
           }}
+          animate
+          motionConfig={CHART_MOTION_CONFIG}
           xScale={{ type: 'point' }}
           yScale={{
             type: 'linear',

packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/GraphWidgetPieChart.tsx

@@ -1,5 +1,6 @@
 import { GraphWidgetChartContainer } from '@/page-layout/widgets/graph/components/GraphWidgetChartContainer';
 import { GraphWidgetLegend } from '@/page-layout/widgets/graph/components/GraphWidgetLegend';
+import { CHART_MOTION_CONFIG } from '@/page-layout/widgets/graph/constants/ChartMotionConfig';
 import { CustomArcsLayer } from '@/page-layout/widgets/graph/graphWidgetPieChart/components/CustomArcsLayer';
 import { GraphPieChartTooltip } from '@/page-layout/widgets/graph/graphWidgetPieChart/components/GraphPieChartTooltip';
 import { PieChartCenterMetric } from '@/page-layout/widgets/graph/graphWidgetPieChart/components/PieChartCenterMetricLayer';
@@ -186,6 +187,8 @@ export const GraphWidgetPieChart = ({
             margin={showDataLabels && !hasNoData ? PIE_CHART_MARGINS : {}}
             innerRadius={0.8}
             colors={chartColors}
+            animate
+            motionConfig={CHART_MOTION_CONFIG}
             enableArcLinkLabels={showDataLabels && !hasNoData}
             enableArcLabels={false}
             tooltip={() => null}