diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx index 3dfa794ccc..033f7c29c9 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx +++ b/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 ( - + {isPageLayoutInEditMode && ( <> diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/ChartMotionConfig.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/ChartMotionConfig.ts new file mode 100644 index 0000000000..c0a5866774 --- /dev/null +++ b/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, +}; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx index 7b0d7a4f7f..9bbd16eadb 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx +++ b/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', diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx index 7ba0c24198..66e755bd36 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/components/GraphWidgetGaugeChart.tsx +++ b/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} diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx index df2182c99a..5027ff40ce 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx +++ b/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', diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/GraphWidgetPieChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/GraphWidgetPieChart.tsx index 2d66fafe3a..c9fe799ed7 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/components/GraphWidgetPieChart.tsx +++ b/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}