refactoring: #10130

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

@@ -11,7 +11,7 @@ import sizeMe from 'react-sizeme';
 
 let lastGridWidth = 1200;
 
-function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange}) {
+function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange, className}) {
   if (size.width === 0) {
     console.log('size is zero!');
   }
@@ -25,7 +25,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize, onResize
   return (
     <ReactGridLayout
       width={lastGridWidth}
-      className="layout"
+      className={className}
       isDraggable={true}
       isResizable={true}
       measureBeforeMount={false}
@@ -64,6 +64,8 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     this.onResizeStop = this.onResizeStop.bind(this);
     this.onWidthChange = this.onWidthChange.bind(this);
 
+    this.state = {animated: false};
+
     // subscribe to dashboard events
     this.dashboard = this.panelContainer.getDashboard();
     this.dashboard.on('panel-added', this.triggerForceUpdate.bind(this));
@@ -134,6 +136,14 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     this.panelMap[newItem.i].resizeDone();
   }
 
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState(() => {
+        return {animated: true};
+      });
+    });
+  }
+
   renderPanels() {
     const panelElements = [];
 
@@ -150,8 +160,10 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
   }
 
   render() {
+    console.log('animated', this.state.animated);
     return (
       <SizedReactLayoutGrid
+        className={classNames({'layout': true, 'animated': this.state.animated})}
         layout={this.buildLayout()}
         onLayoutChange={this.onLayoutChange}
         onWidthChange={this.onWidthChange}

public/app/plugins/panel/graph/legend.ts

@@ -19,7 +19,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
       var legendScrollbar;
 
       scope.$on("$destroy", function() {
-        if (!legendScrollbar) {
+        if (legendScrollbar) {
           legendScrollbar.destroy();
         }
       });

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;
+}