From 838c63078be1d66505dd1a4e478ea12b29cd7e9f Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 16 Apr 2019 15:45:01 -0700
Subject: [PATCH 1/4] use span for loaders and set width to kibana loader

---
 .../button/__snapshots__/button.test.js.snap  |  2 +-
 .../__snapshots__/facet_button.test.js.snap   |  2 +-
 .../form_control_layout.test.js.snap          |  2 +-
 .../super_select_control.test.js.snap         |  2 +-
 .../__snapshots__/loading_chart.test.tsx.snap | 60 +++++++++----------
 .../loading_kibana.test.tsx.snap              | 32 +++++-----
 .../loading_spinner.test.tsx.snap             | 10 ++--
 src/components/loading/_loading_chart.scss    | 15 +++--
 src/components/loading/_loading_kibana.scss   | 10 ++++
 src/components/loading/loading_chart.tsx      | 12 ++--
 src/components/loading/loading_kibana.tsx     |  8 +--
 src/components/loading/loading_spinner.tsx    |  2 +-
 12 files changed, 83 insertions(+), 74 deletions(-)

diff --git a/src/components/button/__snapshots__/button.test.js.snap b/src/components/button/__snapshots__/button.test.js.snap
index b6cd22095b9..017e2efc45b 100644
--- a/src/components/button/__snapshots__/button.test.js.snap
+++ b/src/components/button/__snapshots__/button.test.js.snap
@@ -306,7 +306,7 @@ exports[`EuiButton props isLoading is rendered 1`] = `
   <span
     class="euiButton__content"
   >
-    <div
+    <span
       class="euiLoadingSpinner euiLoadingSpinner--medium euiButton__spinner"
     />
     <span
diff --git a/src/components/facet/__snapshots__/facet_button.test.js.snap b/src/components/facet/__snapshots__/facet_button.test.js.snap
index f2f77e2e805..bb878eed3df 100644
--- a/src/components/facet/__snapshots__/facet_button.test.js.snap
+++ b/src/components/facet/__snapshots__/facet_button.test.js.snap
@@ -93,7 +93,7 @@ exports[`EuiFacetButton props isLoading is rendered 1`] = `
     >
       Content
     </span>
-    <div
+    <span
       class="euiLoadingSpinner euiLoadingSpinner--medium euiFacetButton__spinner"
     />
   </span>
diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
index 2c95d0cd68e..9ea74f6d8f1 100644
--- a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
@@ -201,7 +201,7 @@ exports[`EuiFormControlLayout props isLoading is rendered 1`] = `
     <div
       class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
     >
-      <div
+      <span
         class="euiLoadingSpinner euiLoadingSpinner--medium"
       />
     </div>
diff --git a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
index 35dbb432173..99db8107f12 100644
--- a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
+++ b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
@@ -384,7 +384,7 @@ Array [
       <div
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
       >
-        <div
+        <span
           class="euiLoadingSpinner euiLoadingSpinner--medium"
         />
         <span
diff --git a/src/components/loading/__snapshots__/loading_chart.test.tsx.snap b/src/components/loading/__snapshots__/loading_chart.test.tsx.snap
index 8505d80a232..b2e1cf89346 100644
--- a/src/components/loading/__snapshots__/loading_chart.test.tsx.snap
+++ b/src/components/loading/__snapshots__/loading_chart.test.tsx.snap
@@ -1,98 +1,98 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiLoadingChart is rendered 1`] = `
-<div
+<span
   aria-label="aria-label"
   class="euiLoadingChart testClass1 testClass2 euiLoadingChart--medium"
   data-test-subj="test subject string"
 >
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-</div>
+</span>
 `;
 
 exports[`EuiLoadingChart mono is rendered 1`] = `
-<div
+<span
   class="euiLoadingChart euiLoadingChart--mono euiLoadingChart--medium"
 >
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-</div>
+</span>
 `;
 
 exports[`EuiLoadingChart size l is rendered 1`] = `
-<div
+<span
   class="euiLoadingChart euiLoadingChart--large"
 >
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-</div>
+</span>
 `;
 
 exports[`EuiLoadingChart size m is rendered 1`] = `
-<div
+<span
   class="euiLoadingChart euiLoadingChart--medium"
 >
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-</div>
+</span>
 `;
 
 exports[`EuiLoadingChart size xl is rendered 1`] = `
-<div
+<span
   class="euiLoadingChart euiLoadingChart--xLarge"
 >
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-  <div
+  <span
     class="euiLoadingChart__bar"
   />
-</div>
+</span>
 `;
diff --git a/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap b/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap
index 4a32a07247d..d28dbbc7230 100644
--- a/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap
+++ b/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiLoadingKibana is rendered 1`] = `
-<div
+<span
   aria-label="aria-label"
   class="euiLoadingKibana euiLoadingKibana--medium testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <div
+  <span
     class="euiLoadingKibana__icon"
   >
     <svg
@@ -35,15 +35,15 @@ exports[`EuiLoadingKibana is rendered 1`] = `
         />
       </g>
     </svg>
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingKibana size l is rendered 1`] = `
-<div
+<span
   class="euiLoadingKibana euiLoadingKibana--large"
 >
-  <div
+  <span
     class="euiLoadingKibana__icon"
   >
     <svg
@@ -72,15 +72,15 @@ exports[`EuiLoadingKibana size l is rendered 1`] = `
         />
       </g>
     </svg>
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingKibana size m is rendered 1`] = `
-<div
+<span
   class="euiLoadingKibana euiLoadingKibana--medium"
 >
-  <div
+  <span
     class="euiLoadingKibana__icon"
   >
     <svg
@@ -109,15 +109,15 @@ exports[`EuiLoadingKibana size m is rendered 1`] = `
         />
       </g>
     </svg>
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingKibana size xl is rendered 1`] = `
-<div
+<span
   class="euiLoadingKibana euiLoadingKibana--xLarge"
 >
-  <div
+  <span
     class="euiLoadingKibana__icon"
   >
     <svg
@@ -146,6 +146,6 @@ exports[`EuiLoadingKibana size xl is rendered 1`] = `
         />
       </g>
     </svg>
-  </div>
-</div>
+  </span>
+</span>
 `;
diff --git a/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap b/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap
index c40ac4a73bb..c06602f07eb 100644
--- a/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap
+++ b/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiLoadingSpinner is rendered 1`] = `
-<div
+<span
   aria-label="aria-label"
   class="euiLoadingSpinner euiLoadingSpinner--medium testClass1 testClass2"
   data-test-subj="test subject string"
@@ -9,25 +9,25 @@ exports[`EuiLoadingSpinner is rendered 1`] = `
 `;
 
 exports[`EuiLoadingSpinner size l is rendered 1`] = `
-<div
+<span
   class="euiLoadingSpinner euiLoadingSpinner--large"
 />
 `;
 
 exports[`EuiLoadingSpinner size m is rendered 1`] = `
-<div
+<span
   class="euiLoadingSpinner euiLoadingSpinner--medium"
 />
 `;
 
 exports[`EuiLoadingSpinner size s is rendered 1`] = `
-<div
+<span
   class="euiLoadingSpinner euiLoadingSpinner--small"
 />
 `;
 
 exports[`EuiLoadingSpinner size xl is rendered 1`] = `
-<div
+<span
   class="euiLoadingSpinner euiLoadingSpinner--xLarge"
 />
 `;
diff --git a/src/components/loading/_loading_chart.scss b/src/components/loading/_loading_chart.scss
index 380638279b2..749bd3b68dd 100644
--- a/src/components/loading/_loading_chart.scss
+++ b/src/components/loading/_loading_chart.scss
@@ -1,5 +1,5 @@
 .euiLoadingChart {
-  height: 32px;
+  height: $euiSizeXL;
   z-index: 500;
   overflow: hidden;
   display: inline-block;
@@ -7,11 +7,10 @@
 
 .euiLoadingChart__bar {
   height: 100%;
-  width: 8px;
+  width: $euiSizeS;
   display: inline-block;
-  float: left;
-  margin-bottom: -16px;
-  margin-left: 2px;
+  margin-bottom: -$euiSize;
+  margin-left: $euiSizeXS / 2;
   animation: euiLoadingChart 1s infinite;
 
   &:nth-child(1) {
@@ -57,7 +56,7 @@
 .euiLoadingChart--medium {
   height: $euiSize;
 
-  > div {
+  > span {
     width: $euiSizeXS / 2;
     margin-left: $euiSizeXS / 2;
     margin-bottom: $euiSizeS;
@@ -67,7 +66,7 @@
 .euiLoadingChart--large {
   height: $euiSizeL;
 
-  > div {
+  > span {
     width: $euiSizeXS;
     margin-left: $euiSizeXS / 2;
     margin-bottom: $euiSizeL / 2;
@@ -77,7 +76,7 @@
 .euiLoadingChart--xLarge {
   height: $euiSizeXL;
 
-  > div {
+  > span {
     width: $euiSizeS;
     margin-left: $euiSizeXS;
     margin-bottom: $euiSizeXL / 2;
diff --git a/src/components/loading/_loading_kibana.scss b/src/components/loading/_loading_kibana.scss
index f08a3b6a0ab..96ffe2c393b 100644
--- a/src/components/loading/_loading_kibana.scss
+++ b/src/components/loading/_loading_kibana.scss
@@ -22,12 +22,18 @@
     background-color: $euiColorFullShade;
     animation: 1s euiLoadingKibanaPulsate $euiAnimSlightResistance infinite;
   }
+
+  .euiLoadingKibana__icon {
+    display: block;
+  }
 }
 
 /**
  * 1. Requires pixel math for animation.
  */
 .euiLoadingKibana--medium {
+  width: $euiSize;
+
   &:before,
   &:after {
     height: $euiSizeXS - 1; /* 1 */
@@ -44,6 +50,8 @@
  * 1. Requires pixel math for animation.
  */
 .euiLoadingKibana--large {
+  width: $euiSizeL;
+
   &:before,
   &:after {
     height: $euiSizeS - 2; /* 1 */
@@ -56,6 +64,8 @@
 }
 
 .euiLoadingKibana--xLarge {
+  width: $euiSizeXL;
+
   &:before,
   &:after {
     height: $euiSizeS;
diff --git a/src/components/loading/loading_chart.tsx b/src/components/loading/loading_chart.tsx
index 2eef9b272c7..72996f246ae 100644
--- a/src/components/loading/loading_chart.tsx
+++ b/src/components/loading/loading_chart.tsx
@@ -30,11 +30,11 @@ export const EuiLoadingChart: FunctionComponent<
   );
 
   return (
-    <div className={classes} {...rest}>
-      <div className="euiLoadingChart__bar" />
-      <div className="euiLoadingChart__bar" />
-      <div className="euiLoadingChart__bar" />
-      <div className="euiLoadingChart__bar" />
-    </div>
+    <span className={classes} {...rest}>
+      <span className="euiLoadingChart__bar" />
+      <span className="euiLoadingChart__bar" />
+      <span className="euiLoadingChart__bar" />
+      <span className="euiLoadingChart__bar" />
+    </span>
   );
 };
diff --git a/src/components/loading/loading_kibana.tsx b/src/components/loading/loading_kibana.tsx
index d3826231aab..d9ac18e4b2a 100644
--- a/src/components/loading/loading_kibana.tsx
+++ b/src/components/loading/loading_kibana.tsx
@@ -25,10 +25,10 @@ export const EuiLoadingKibana: FunctionComponent<
   );
 
   return (
-    <div className={classes} {...rest}>
-      <div className="euiLoadingKibana__icon">
+    <span className={classes} {...rest}>
+      <span className="euiLoadingKibana__icon">
         <EuiIcon type="logoKibana" size={size} />
-      </div>
-    </div>
+      </span>
+    </span>
   );
 };
diff --git a/src/components/loading/loading_spinner.tsx b/src/components/loading/loading_spinner.tsx
index 9436dc74855..4d0da293c03 100644
--- a/src/components/loading/loading_spinner.tsx
+++ b/src/components/loading/loading_spinner.tsx
@@ -25,5 +25,5 @@ export const EuiLoadingSpinner: FunctionComponent<
     className
   );
 
-  return <div className={classes} {...rest} />;
+  return <span className={classes} {...rest} />;
 };

From 6f24e1ec86f2e6d7ca1b7e5e40a09ec2872452ab Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 16 Apr 2019 16:16:56 -0700
Subject: [PATCH 2/4] cl

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 512c293aae1..2323c11446c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,11 @@ No public interface changes since `10.0.1`.
 
 - Convert `EuiText`, `EuiTextColor` and `EuiTextAlign` to TS ([#1791](https://github.com/elastic/eui/pull/1791))
 - Updated `IconColor` type to better distinguish between accepted types ([#1842](https://github.com/elastic/eui/pull/1842))
+- Changed `EuiLoding` components to use spans instead of divs  ([#1845](https://github.com/elastic/eui/pull/1845))
+
+**Bug fixes**
+
+- Changed `EuiLoadingKibana` so it could better nest within `EuiFlexItem`  ([#1845](https://github.com/elastic/eui/pull/1845))
 
 ## [`10.0.0`](https://github.com/elastic/eui/tree/v10.0.0)
 

From b12443b3cb8816d506a115f10a7aca6b09e57be0 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Tue, 16 Apr 2019 21:48:31 -0700
Subject: [PATCH 3/4] typo

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2323c11446c..0b7cbe69138 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@ No public interface changes since `10.0.1`.
 
 - Convert `EuiText`, `EuiTextColor` and `EuiTextAlign` to TS ([#1791](https://github.com/elastic/eui/pull/1791))
 - Updated `IconColor` type to better distinguish between accepted types ([#1842](https://github.com/elastic/eui/pull/1842))
-- Changed `EuiLoding` components to use spans instead of divs  ([#1845](https://github.com/elastic/eui/pull/1845))
+- Changed `EuiLoading` components to use spans instead of divs  ([#1845](https://github.com/elastic/eui/pull/1845))
 
 **Bug fixes**
 

From 0f0cc038233a54be888c39a1b8d2060893665877 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Wed, 17 Apr 2019 09:22:37 -0700
Subject: [PATCH 4/4] feedback

---
 CHANGELOG.md                                  |   2 +-
 .../loading_content.test.tsx.snap             | 392 +++++++++---------
 src/components/loading/_loading_content.scss  |   3 +
 src/components/loading/loading_content.tsx    |  10 +-
 4 files changed, 205 insertions(+), 202 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b7cbe69138..062c69f43a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@ No public interface changes since `10.0.1`.
 
 - Convert `EuiText`, `EuiTextColor` and `EuiTextAlign` to TS ([#1791](https://github.com/elastic/eui/pull/1791))
 - Updated `IconColor` type to better distinguish between accepted types ([#1842](https://github.com/elastic/eui/pull/1842))
-- Changed `EuiLoading` components to use spans instead of divs  ([#1845](https://github.com/elastic/eui/pull/1845))
+- Changed `EuiLoadingKibana`, `EuiLoadingSpinner`, `EuiLoadingChart` and `EuiLoadingContent` components to use spans instead of divs  ([#1845](https://github.com/elastic/eui/pull/1845))
 
 **Bug fixes**
 
diff --git a/src/components/loading/__snapshots__/loading_content.test.tsx.snap b/src/components/loading/__snapshots__/loading_content.test.tsx.snap
index e272883669f..88975ffe1d3 100644
--- a/src/components/loading/__snapshots__/loading_content.test.tsx.snap
+++ b/src/components/loading/__snapshots__/loading_content.test.tsx.snap
@@ -1,486 +1,486 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiLoadingContent is rendered 1`] = `
-<div
+<span
   aria-label="aria-label"
   class="euiLoadingContent testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <div
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingContent lines 1 is rendered 1`] = `
-<div
+<span
   class="euiLoadingContent"
 >
-  <div
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingContent lines 2 is rendered 1`] = `
-<div
+<span
   class="euiLoadingContent"
 >
-  <div
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingContent lines 3 is rendered 1`] = `
-<div
+<span
   class="euiLoadingContent"
 >
-  <div
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingContent lines 4 is rendered 1`] = `
-<div
+<span
   class="euiLoadingContent"
 >
-  <div
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingContent lines 5 is rendered 1`] = `
-<div
+<span
   class="euiLoadingContent"
 >
-  <div
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingContent lines 6 is rendered 1`] = `
-<div
+<span
   class="euiLoadingContent"
 >
-  <div
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingContent lines 7 is rendered 1`] = `
-<div
+<span
   class="euiLoadingContent"
 >
-  <div
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingContent lines 8 is rendered 1`] = `
-<div
+<span
   class="euiLoadingContent"
 >
-  <div
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingContent lines 9 is rendered 1`] = `
-<div
+<span
   class="euiLoadingContent"
 >
-  <div
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingContent lines 10 is rendered 1`] = `
-<div
+<span
   class="euiLoadingContent"
 >
-  <div
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-  <div
+  </span>
+  <span
     class="euiLoadingContent__singleLine"
   >
-    <div
+    <span
       class="euiLoadingContent__singleLineBackground"
     />
-  </div>
-</div>
+  </span>
+</span>
 `;
diff --git a/src/components/loading/_loading_content.scss b/src/components/loading/_loading_content.scss
index fa86ab40f97..0abf65a1c77 100644
--- a/src/components/loading/_loading_content.scss
+++ b/src/components/loading/_loading_content.scss
@@ -1,8 +1,10 @@
 .euiLoadingContent__loader {
+  display: block;
   width: 100%;
 }
 
 .euiLoadingContent__singleLine {
+  display: block;
   width: 100%;
   height: $euiSize;
   margin-bottom: $euiSizeS;
@@ -15,6 +17,7 @@
 }
 
 .euiLoadingContent__singleLineBackground {
+  display: block;
   width: 220%;
   height: 100%;
   background: linear-gradient(
diff --git a/src/components/loading/loading_content.tsx b/src/components/loading/loading_content.tsx
index 20b85d66fe2..35efc2dbafd 100644
--- a/src/components/loading/loading_content.tsx
+++ b/src/components/loading/loading_content.tsx
@@ -15,15 +15,15 @@ export const EuiLoadingContent: FunctionComponent<
 
   for (let i = 0; i < lines; i++) {
     lineElements.push(
-      <div key={i} className="euiLoadingContent__singleLine">
-        <div className="euiLoadingContent__singleLineBackground" />
-      </div>
+      <span key={i} className="euiLoadingContent__singleLine">
+        <span className="euiLoadingContent__singleLineBackground" />
+      </span>
     );
   }
 
   return (
-    <div className={classes} {...rest}>
+    <span className={classes} {...rest}>
       {lineElements}
-    </div>
+    </span>
   );
 };