From 7da9a63ef654e5b4cd4f4811a556e5ba60d2faeb Mon Sep 17 00:00:00 2001
From: Scott Dickerson <swiftfoot@hotmail.com>
Date: Wed, 9 Dec 2020 13:29:05 -0600
Subject: [PATCH] fix(dashboardeditor): add padding around skeletontext in
 loading

---
 .../DashboardEditor/DashboardEditor.jsx        | 13 +++++--------
 .../DashboardEditor.story.storyshot            | 18 +++++++++++-------
 .../DashboardEditor/_dashboard-editor.scss     |  4 ++++
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/components/DashboardEditor/DashboardEditor.jsx b/src/components/DashboardEditor/DashboardEditor.jsx
index c3a499527e..368cc37451 100644
--- a/src/components/DashboardEditor/DashboardEditor.jsx
+++ b/src/components/DashboardEditor/DashboardEditor.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { InlineNotification } from 'carbon-components-react';
+import { InlineNotification, SkeletonText } from 'carbon-components-react';
 import isNil from 'lodash/isNil';
 import classnames from 'classnames';
 import update from 'immutability-helper';
@@ -11,12 +11,7 @@ import {
   CARD_ACTIONS,
   CARD_TYPES,
 } from '../../constants/LayoutConstants';
-import {
-  DashboardGrid,
-  CardEditor,
-  ErrorBoundary,
-  SkeletonText,
-} from '../../index';
+import { DashboardGrid, CardEditor, ErrorBoundary } from '../../index';
 import ImageGalleryModal, {
   ImagePropTypes,
 } from '../ImageGalleryModal/ImageGalleryModal';
@@ -394,7 +389,9 @@ const DashboardEditor = ({
   });
 
   return isLoading ? (
-    <SkeletonText width="30%" />
+    <div className={baseClassName}>
+      <SkeletonText width="30%" />
+    </div>
   ) : (
     <div className={baseClassName}>
       <div
diff --git a/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot b/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot
index b40392a08a..3ddb73ce20 100644
--- a/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot
+++ b/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot
@@ -4326,14 +4326,18 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
         }
       }
     >
-      <p
-        className="bx--skeleton__text"
-        style={
-          Object {
-            "width": "30%",
+      <div
+        className="iot--dashboard-editor"
+      >
+        <p
+          className="bx--skeleton__text"
+          style={
+            Object {
+              "width": "30%",
+            }
           }
-        }
-      />
+        />
+      </div>
     </div>
   </div>
   <button
diff --git a/src/components/DashboardEditor/_dashboard-editor.scss b/src/components/DashboardEditor/_dashboard-editor.scss
index e91749cbb3..65dd235472 100644
--- a/src/components/DashboardEditor/_dashboard-editor.scss
+++ b/src/components/DashboardEditor/_dashboard-editor.scss
@@ -1,6 +1,10 @@
 .#{$iot-prefix}--dashboard-editor {
   display: flex;
   height: 100%;
+  > .#{$prefix}--skeleton__text {
+    margin-top: 1rem;
+    margin-left: 1rem;
+  }
 
   &__overflow {
     overflow-x: auto; // allows a larger width