From e0c173c5afd3a353fda6fc2fdca396438a5e71b6 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Fri, 8 Dec 2017 13:49:14 +0300
Subject: [PATCH] Don't animate panels on initial render (#10130)

* grid: dont animate panels on initial render

* grid: dont animate panels on initial render
---
 .../dashboard/dashgrid/DashboardGrid.tsx      | 76 ++++++++++++-------
 public/sass/components/_dashboard_grid.scss   |  9 +++
 2 files changed, 58 insertions(+), 27 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index bb06df15183..392d8f4e805 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -11,37 +11,59 @@ import sizeMe from 'react-sizeme';
 
 let lastGridWidth = 1200;
 
-function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange}) {
-  if (size.width === 0) {
-    console.log('size is zero!');
+export interface GridWrapperProps {
+  size: any;
+  layout: any;
+  children: any;
+  onResize: any;
+  onResizeStop: any;
+  onWidthChange: any;
+  onLayoutChange: any;
+}
+
+class GridWrapper extends React.Component<GridWrapperProps, any> {
+  animated: boolean;
+
+  constructor(props) {
+    super(props);
+    if (this.props.size.width === 0) {
+      console.log('size is zero!');
+    }
+
+    const width = this.props.size.width > 0 ? this.props.size.width : lastGridWidth;
+    if (width !== lastGridWidth) {
+      this.props.onWidthChange();
+      lastGridWidth = width;
+    }
   }
 
-  const width = size.width > 0 ? size.width : lastGridWidth;
-  if (width !== lastGridWidth) {
-    onWidthChange();
-    lastGridWidth = width;
+  componentDidMount() {
+    // Disable animation on initial rendering and enable it when component has been mounted.
+    this.animated = true;
   }
 
-  return (
-    <ReactGridLayout
-      width={lastGridWidth}
-      className="layout"
-      isDraggable={true}
-      isResizable={true}
-      measureBeforeMount={false}
-      containerPadding={[0, 0]}
-      useCSSTransforms={true}
-      margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}
-      cols={GRID_COLUMN_COUNT}
-      rowHeight={GRID_CELL_HEIGHT}
-      draggableHandle=".grid-drag-handle"
-      layout={layout}
-      onResize={onResize}
-      onResizeStop={onResizeStop}
-      onLayoutChange={onLayoutChange}>
-      {children}
-    </ReactGridLayout>
-  );
+  render() {
+    return (
+      <ReactGridLayout
+        width={lastGridWidth}
+        className={this.animated ? 'layout animated' : 'layout'}
+        isDraggable={true}
+        isResizable={true}
+        measureBeforeMount={false}
+        containerPadding={[0, 0]}
+        useCSSTransforms={true}
+        margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}
+        cols={GRID_COLUMN_COUNT}
+        rowHeight={GRID_CELL_HEIGHT}
+        draggableHandle=".grid-drag-handle"
+        layout={this.props.layout}
+        onResize={this.props.onResize}
+        onResizeStop={this.props.onResizeStop}
+        onLayoutChange={this.props.onLayoutChange}>
+        {this.props.children}
+      </ReactGridLayout>
+    );
+  }
 }
 
 const SizedReactLayoutGrid = sizeMe({monitorWidth: true})(GridWrapper);
diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss
index 076e8cad0b7..656efe4c880 100644
--- a/public/sass/components/_dashboard_grid.scss
+++ b/public/sass/components/_dashboard_grid.scss
@@ -53,3 +53,12 @@
 .react-grid-item.react-draggable-dragging.panel {
   z-index: $zindex-dropdown;
 }
+
+// Disable animation on initial rendering and enable it when component has been mounted.
+.react-grid-item.cssTransforms.panel {
+  transition-property: none;
+}
+
+.animated .react-grid-item.cssTransforms.panel {
+  transition-property: transform;
+}