Change progress bar to spinner (#78460) (#78694)

* Change progress bar to spinner

* Add progress bar option for full screen mode

* Update snapshots for router test

* Update snapshots for loading indicator test

* Update header snapshot

* Change progress bar position to fix full screen

src/core/public/application/integration_tests/router.test.tsx

@@ -107,7 +107,7 @@ describe('AppRouter', () => {
 
     expect(app1.mounter.mount).toHaveBeenCalled();
     expect(dom?.html()).toMatchInlineSnapshot(`
-      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingSpinner euiLoadingSpinner--large\\"></span></div><div><div>
+      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingElastic euiLoadingElastic--xxLarge\\" aria-label=\\"Loading application\\"><div data-euiicon-type=\\"logoElastic\\"></div></span></div><div><div>
       basename: /app/app1
       html: <span>App 1</span>
       </div></div>"
@@ -119,7 +119,7 @@ describe('AppRouter', () => {
     expect(app1Unmount).toHaveBeenCalled();
     expect(app2.mounter.mount).toHaveBeenCalled();
     expect(dom?.html()).toMatchInlineSnapshot(`
-      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingSpinner euiLoadingSpinner--large\\"></span></div><div><div>
+      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingElastic euiLoadingElastic--xxLarge\\" aria-label=\\"Loading application\\"><div data-euiicon-type=\\"logoElastic\\"></div></span></div><div><div>
       basename: /app/app2
       html: <div>App 2</div>
       </div></div>"
@@ -133,7 +133,7 @@ describe('AppRouter', () => {
 
     expect(standardApp.mounter.mount).toHaveBeenCalled();
     expect(dom?.html()).toMatchInlineSnapshot(`
-      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingSpinner euiLoadingSpinner--large\\"></span></div><div><div>
+      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingElastic euiLoadingElastic--xxLarge\\" aria-label=\\"Loading application\\"><div data-euiicon-type=\\"logoElastic\\"></div></span></div><div><div>
       basename: /app/app1
       html: <span>App 1</span>
       </div></div>"
@@ -145,7 +145,7 @@ describe('AppRouter', () => {
     expect(standardAppUnmount).toHaveBeenCalled();
     expect(chromelessApp.mounter.mount).toHaveBeenCalled();
     expect(dom?.html()).toMatchInlineSnapshot(`
-      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingSpinner euiLoadingSpinner--large\\"></span></div><div><div>
+      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingElastic euiLoadingElastic--xxLarge\\" aria-label=\\"Loading application\\"><div data-euiicon-type=\\"logoElastic\\"></div></span></div><div><div>
       basename: /chromeless-a/path
       html: <div>Chromeless A</div>
       </div></div>"
@@ -157,7 +157,7 @@ describe('AppRouter', () => {
     expect(chromelessAppUnmount).toHaveBeenCalled();
     expect(standardApp.mounter.mount).toHaveBeenCalledTimes(2);
     expect(dom?.html()).toMatchInlineSnapshot(`
-      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingSpinner euiLoadingSpinner--large\\"></span></div><div><div>
+      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingElastic euiLoadingElastic--xxLarge\\" aria-label=\\"Loading application\\"><div data-euiicon-type=\\"logoElastic\\"></div></span></div><div><div>
       basename: /app/app1
       html: <span>App 1</span>
       </div></div>"
@@ -171,7 +171,7 @@ describe('AppRouter', () => {
 
     expect(chromelessAppA.mounter.mount).toHaveBeenCalled();
     expect(dom?.html()).toMatchInlineSnapshot(`
-      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingSpinner euiLoadingSpinner--large\\"></span></div><div><div>
+      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingElastic euiLoadingElastic--xxLarge\\" aria-label=\\"Loading application\\"><div data-euiicon-type=\\"logoElastic\\"></div></span></div><div><div>
       basename: /chromeless-a/path
       html: <div>Chromeless A</div>
       </div></div>"
@@ -183,7 +183,7 @@ describe('AppRouter', () => {
     expect(chromelessAppAUnmount).toHaveBeenCalled();
     expect(chromelessAppB.mounter.mount).toHaveBeenCalled();
     expect(dom?.html()).toMatchInlineSnapshot(`
-      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingSpinner euiLoadingSpinner--large\\"></span></div><div><div>
+      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingElastic euiLoadingElastic--xxLarge\\" aria-label=\\"Loading application\\"><div data-euiicon-type=\\"logoElastic\\"></div></span></div><div><div>
       basename: /chromeless-b/path
       html: <div>Chromeless B</div>
       </div></div>"
@@ -195,7 +195,7 @@ describe('AppRouter', () => {
     expect(chromelessAppBUnmount).toHaveBeenCalled();
     expect(chromelessAppA.mounter.mount).toHaveBeenCalledTimes(2);
     expect(dom?.html()).toMatchInlineSnapshot(`
-      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingSpinner euiLoadingSpinner--large\\"></span></div><div><div>
+      "<div class=\\"appContainer__loading\\"><span class=\\"euiLoadingElastic euiLoadingElastic--xxLarge\\" aria-label=\\"Loading application\\"><div data-euiicon-type=\\"logoElastic\\"></div></span></div><div><div>
       basename: /chromeless-a/path
       html: <div>Chromeless A</div>
       </div></div>"

src/core/public/application/ui/app_container.tsx

@@ -25,7 +25,7 @@ import React, {
   useState,
   MutableRefObject,
 } from 'react';
-import { EuiLoadingSpinner } from '@elastic/eui';
+import { EuiLoadingElastic } from '@elastic/eui';
 
 import type { MountPoint } from '../../types';
 import { AppLeaveHandler, AppStatus, AppUnmount, Mounter } from '../types';
@@ -120,7 +120,7 @@ export const AppContainer: FunctionComponent<Props> = ({
       {appNotFound && <AppNotFound />}
       {showSpinner && (
         <div className="appContainer__loading">
-          <EuiLoadingSpinner size="l" />
+          <EuiLoadingElastic aria-label="Loading application" size="xxl" />
         </div>
       )}
       <div key={appId} ref={elementRef} />

src/core/public/chrome/ui/_loading_indicator.scss

@@ -1,55 +1,4 @@
-$kbnLoadingIndicatorBackgroundSize: $euiSizeXXL * 10;
-$kbnLoadingIndicatorColor1: tint($euiColorAccent, 15%);
-$kbnLoadingIndicatorColor2: tint($euiColorAccent, 60%);
-
-/**
- * 1. Position this loader on top of the content.
- * 2. Make sure indicator isn't wider than the screen.
- */
-.kbnLoadingIndicator {
-  position: fixed; // 1
-  top: 0; // 1
-  left: 0; // 1
-  right: 0; // 1
-  z-index: $euiZLevel2; // 1
-  overflow: hidden; // 2
-  height: $euiSizeXS / 2;
-
-  &.hidden {
-    visibility: hidden;
-    opacity: 0;
-    transition-delay: 0.25s;
-  }
-}
-
-.kbnLoadingIndicator__bar {
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
-  z-index: $euiZLevel2 + 1;
-  visibility: visible;
-  display: block;
-  animation: kbn-animate-loading-indicator 2s linear infinite;
-  background-color: $kbnLoadingIndicatorColor2;
-  background-image: linear-gradient(
-    to right,
-    $kbnLoadingIndicatorColor1 0%,
-    $kbnLoadingIndicatorColor1 50%,
-    $kbnLoadingIndicatorColor2 50%,
-    $kbnLoadingIndicatorColor2 100%
-  );
-  background-repeat: repeat-x;
-  background-size: $kbnLoadingIndicatorBackgroundSize $kbnLoadingIndicatorBackgroundSize;
-  width: 200%;
-}
-
-@keyframes kbn-animate-loading-indicator {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-$kbnLoadingIndicatorBackgroundSize);
-  }
+.kbnLoadingIndicator-hidden {
+  visibility: hidden;
+  animation-play-state: paused;
 }