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.

Sign up for GitHub

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

Jump to bottom

Change progress bar to spinner #78460

Merged
merged 10 commits into from
Sep 28, 2020
Merged

Change progress bar to spinner #78460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3ecf84e
Change progress bar to spinner
ryankeairns Sep 24, 2020
d5493cb
Add progress bar option for full screen mode
ryankeairns Sep 24, 2020
e23b1be
Update snapshots for router test
ryankeairns Sep 24, 2020
c11811e
Update snapshots for loading indicator test
ryankeairns Sep 24, 2020
cd5cfe9
Update header snapshot
ryankeairns Sep 24, 2020
f2ef2ba
Merge branch 'master' into rk/bar-to-spinner
ryankeairns Sep 25, 2020
ede0a37
Merge branch 'master' into rk/bar-to-spinner
ryankeairns Sep 25, 2020
efc5801
Change progress bar position to fix full screen
ryankeairns Sep 26, 2020
329c38e
Merge branch 'master' into rk/bar-to-spinner
ryankeairns Sep 28, 2020
d29dd8a
Merge branch 'master' into rk/bar-to-spinner
ryankeairns Sep 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 8 additions & 8 deletions src/core/public/application/integration_tests/router.test.tsx
View file
Open in desktop
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
View file
Open in desktop
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
24 changes: 10 additions & 14 deletions src/core/public/chrome/ui/__snapshots__/loading_indicator.test.tsx.snap
View file
Open in desktop

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
View file
Open in desktop
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
View file
Open in desktop

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