diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index 42889a4eedb..0675c7afa60 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -188,11 +188,7 @@ export class DataPanel extends Component<Props, State> {
     const panelData = this.getPanelData();
 
     if (isFirstLoad && loading === LoadingState.Loading) {
-      return (
-        <div className="panel-loading">
-          <i className="fa fa-spinner fa-spin" />
-        </div>
-      );
+      return this.renderLoadingState();
     }
 
     if (!queries.length) {
@@ -203,9 +199,23 @@ export class DataPanel extends Component<Props, State> {
       );
     }
 
-    return this.props.children({
-      loading,
-      panelData,
-    });
+    return (
+      <>
+        {this.renderLoadingState()}
+        {this.props.children({ loading, panelData })}
+      </>
+    );
+  }
+
+  private renderLoadingState(): JSX.Element {
+    const { loading } = this.state;
+    if (loading === LoadingState.Loading) {
+      return (
+        <div className="panel-loading">
+          <i className="fa fa-spinner fa-spin" />
+        </div>
+      );
+    }
+    return null;
   }
 }