Revert "Don't animate panels on initial render (#10130)"

This reverts commit e0c173c5afd3a353fda6fc2fdca396438a5e71b6.

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -11,59 +11,37 @@ import sizeMe from 'react-sizeme';
 
 let lastGridWidth = 1200;
 
-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;
-    }
+function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange}) {
+  if (size.width === 0) {
+    console.log('size is zero!');
   }
 
-  componentDidMount() {
-    // Disable animation on initial rendering and enable it when component has been mounted.
-    this.animated = true;
+  const width = size.width > 0 ? size.width : lastGridWidth;
+  if (width !== lastGridWidth) {
+    onWidthChange();
+    lastGridWidth = width;
   }
 
-  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>
-    );
-  }
+  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>
+  );
 }
 
 const SizedReactLayoutGrid = sizeMe({monitorWidth: true})(GridWrapper);

public/sass/components/_dashboard_grid.scss

@@ -53,12 +53,3 @@
 .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;
-}