Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change progress bar to spinner #78460

Merged
merged 10 commits into from
Sep 28, 2020
16 changes: 8 additions & 8 deletions src/core/public/application/integration_tests/router.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>"
Expand All @@ -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>"
Expand All @@ -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>"
Expand All @@ -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>"
Expand All @@ -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>"
Expand All @@ -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>"
Expand All @@ -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>"
Expand All @@ -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>"
Expand Down
4 changes: 2 additions & 2 deletions src/core/public/application/ui/app_container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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} />
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

57 changes: 3 additions & 54 deletions src/core/public/chrome/ui/_loading_indicator.scss
Original file line number Diff line number Diff line change
@@ -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;
}
187 changes: 127 additions & 60 deletions src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading