mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
Moving loader to logo in header, add a slight 250ms pause (#78879)
Puts a loader on the logo and replaces the bar that normally showed up.
This commit is contained in:
Dave Snider
GitHub
parent
ca8b03823b
commit
98c751a0f5
8 changed files with 281 additions and 174 deletions
|
|
@ -1,19 +1,21 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`kbnLoadingIndicator is hidden by default 1`] = `
|
||||
<EuiLoadingSpinner
|
||||
aria-hidden={true}
|
||||
aria-label="Loading content"
|
||||
className="kbnLoadingIndicator-hidden"
|
||||
<EuiIcon
|
||||
aria-label="Elastic Logo"
|
||||
className="chrHeaderLogo__cluster"
|
||||
data-test-subj="globalLoadingIndicator-hidden"
|
||||
size="l"
|
||||
type="logoElastic"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`kbnLoadingIndicator is visible when loadingCount is > 0 1`] = `
|
||||
<EuiLoadingSpinner
|
||||
aria-hidden={false}
|
||||
aria-label="Loading content"
|
||||
className=""
|
||||
data-test-subj="globalLoadingIndicator"
|
||||
<EuiIcon
|
||||
aria-label="Elastic Logo"
|
||||
className="chrHeaderLogo__cluster"
|
||||
data-test-subj="globalLoadingIndicator-hidden"
|
||||
size="l"
|
||||
type="logoElastic"
|
||||
/>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1715,6 +1715,55 @@ exports[`Header renders 1`] = `
|
|||
}
|
||||
}
|
||||
href="/"
|
||||
loadingCount$={
|
||||
BehaviorSubject {
|
||||
"_isScalar": false,
|
||||
"_value": 0,
|
||||
"closed": false,
|
||||
"hasError": false,
|
||||
"isStopped": false,
|
||||
"observers": Array [
|
||||
Subscriber {
|
||||
"_parentOrParents": null,
|
||||
"_subscriptions": Array [
|
||||
SubjectSubscription {
|
||||
"_parentOrParents": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"subject": [Circular],
|
||||
"subscriber": [Circular],
|
||||
},
|
||||
],
|
||||
"closed": false,
|
||||
"destination": SafeSubscriber {
|
||||
"_complete": undefined,
|
||||
"_context": [Circular],
|
||||
"_error": undefined,
|
||||
"_next": [Function],
|
||||
"_parentOrParents": null,
|
||||
"_parentSubscriber": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"destination": Object {
|
||||
"closed": true,
|
||||
"complete": [Function],
|
||||
"error": [Function],
|
||||
"next": [Function],
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": false,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": true,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
],
|
||||
"thrownError": null,
|
||||
}
|
||||
}
|
||||
navLinks$={
|
||||
BehaviorSubject {
|
||||
"_isScalar": false,
|
||||
|
|
@ -1810,58 +1859,6 @@ exports[`Header renders 1`] = `
|
|||
}
|
||||
navigateToApp={[MockFunction]}
|
||||
/>,
|
||||
<LoadingIndicator
|
||||
loadingCount$={
|
||||
BehaviorSubject {
|
||||
"_isScalar": false,
|
||||
"_value": 0,
|
||||
"closed": false,
|
||||
"hasError": false,
|
||||
"isStopped": false,
|
||||
"observers": Array [
|
||||
Subscriber {
|
||||
"_parentOrParents": null,
|
||||
"_subscriptions": Array [
|
||||
SubjectSubscription {
|
||||
"_parentOrParents": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"subject": [Circular],
|
||||
"subscriber": [Circular],
|
||||
},
|
||||
],
|
||||
"closed": false,
|
||||
"destination": SafeSubscriber {
|
||||
"_complete": undefined,
|
||||
"_context": [Circular],
|
||||
"_error": undefined,
|
||||
"_next": [Function],
|
||||
"_parentOrParents": null,
|
||||
"_parentSubscriber": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"destination": Object {
|
||||
"closed": true,
|
||||
"complete": [Function],
|
||||
"error": [Function],
|
||||
"next": [Function],
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": false,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": true,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
],
|
||||
"thrownError": null,
|
||||
}
|
||||
}
|
||||
showAsBar={false}
|
||||
/>,
|
||||
],
|
||||
},
|
||||
Object {
|
||||
|
|
@ -2821,6 +2818,55 @@ exports[`Header renders 1`] = `
|
|||
}
|
||||
}
|
||||
href="/"
|
||||
loadingCount$={
|
||||
BehaviorSubject {
|
||||
"_isScalar": false,
|
||||
"_value": 0,
|
||||
"closed": false,
|
||||
"hasError": false,
|
||||
"isStopped": false,
|
||||
"observers": Array [
|
||||
Subscriber {
|
||||
"_parentOrParents": null,
|
||||
"_subscriptions": Array [
|
||||
SubjectSubscription {
|
||||
"_parentOrParents": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"subject": [Circular],
|
||||
"subscriber": [Circular],
|
||||
},
|
||||
],
|
||||
"closed": false,
|
||||
"destination": SafeSubscriber {
|
||||
"_complete": undefined,
|
||||
"_context": [Circular],
|
||||
"_error": undefined,
|
||||
"_next": [Function],
|
||||
"_parentOrParents": null,
|
||||
"_parentSubscriber": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"destination": Object {
|
||||
"closed": true,
|
||||
"complete": [Function],
|
||||
"error": [Function],
|
||||
"next": [Function],
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": false,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": true,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
],
|
||||
"thrownError": null,
|
||||
}
|
||||
}
|
||||
navLinks$={
|
||||
BehaviorSubject {
|
||||
"_isScalar": false,
|
||||
|
|
@ -2916,117 +2962,106 @@ exports[`Header renders 1`] = `
|
|||
}
|
||||
navigateToApp={[MockFunction]}
|
||||
>
|
||||
<EuiHeaderLogo
|
||||
aria-label="Go to home page"
|
||||
<a
|
||||
aria-label="Elastic home"
|
||||
className="euiHeaderLogo"
|
||||
data-test-subj="logo"
|
||||
href="/"
|
||||
iconType="logoElastic"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<a
|
||||
aria-label="Go to home page"
|
||||
className="euiHeaderLogo"
|
||||
data-test-subj="logo"
|
||||
href="/"
|
||||
onClick={[Function]}
|
||||
rel="noreferrer"
|
||||
<LoadingIndicator
|
||||
loadingCount$={
|
||||
BehaviorSubject {
|
||||
"_isScalar": false,
|
||||
"_value": 0,
|
||||
"closed": false,
|
||||
"hasError": false,
|
||||
"isStopped": false,
|
||||
"observers": Array [
|
||||
Subscriber {
|
||||
"_parentOrParents": null,
|
||||
"_subscriptions": Array [
|
||||
SubjectSubscription {
|
||||
"_parentOrParents": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"subject": [Circular],
|
||||
"subscriber": [Circular],
|
||||
},
|
||||
],
|
||||
"closed": false,
|
||||
"destination": SafeSubscriber {
|
||||
"_complete": undefined,
|
||||
"_context": [Circular],
|
||||
"_error": undefined,
|
||||
"_next": [Function],
|
||||
"_parentOrParents": null,
|
||||
"_parentSubscriber": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"destination": Object {
|
||||
"closed": true,
|
||||
"complete": [Function],
|
||||
"error": [Function],
|
||||
"next": [Function],
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": false,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": true,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
],
|
||||
"thrownError": null,
|
||||
}
|
||||
}
|
||||
showAsBar={false}
|
||||
>
|
||||
<EuiIcon
|
||||
aria-label="Elastic"
|
||||
className="euiHeaderLogo__icon"
|
||||
aria-label="Elastic Logo"
|
||||
className="chrHeaderLogo__cluster"
|
||||
data-test-subj="globalLoadingIndicator-hidden"
|
||||
size="l"
|
||||
type="logoElastic"
|
||||
>
|
||||
<div
|
||||
aria-label="Elastic"
|
||||
className="euiHeaderLogo__icon"
|
||||
aria-label="Elastic Logo"
|
||||
className="chrHeaderLogo__cluster"
|
||||
data-euiicon-type="logoElastic"
|
||||
data-test-subj="globalLoadingIndicator-hidden"
|
||||
size="l"
|
||||
/>
|
||||
</EuiIcon>
|
||||
<span
|
||||
className="euiHeaderLogo__text"
|
||||
>
|
||||
Elastic
|
||||
</span>
|
||||
</a>
|
||||
</EuiHeaderLogo>
|
||||
</HeaderLogo>
|
||||
</div>
|
||||
</EuiHeaderSectionItem>
|
||||
<EuiHeaderSectionItem
|
||||
border="none"
|
||||
key="1"
|
||||
>
|
||||
<div
|
||||
className="euiHeaderSectionItem"
|
||||
>
|
||||
<LoadingIndicator
|
||||
loadingCount$={
|
||||
BehaviorSubject {
|
||||
"_isScalar": false,
|
||||
"_value": 0,
|
||||
"closed": false,
|
||||
"hasError": false,
|
||||
"isStopped": false,
|
||||
"observers": Array [
|
||||
Subscriber {
|
||||
"_parentOrParents": null,
|
||||
"_subscriptions": Array [
|
||||
SubjectSubscription {
|
||||
"_parentOrParents": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"subject": [Circular],
|
||||
"subscriber": [Circular],
|
||||
},
|
||||
],
|
||||
"closed": false,
|
||||
"destination": SafeSubscriber {
|
||||
"_complete": undefined,
|
||||
"_context": [Circular],
|
||||
"_error": undefined,
|
||||
"_next": [Function],
|
||||
"_parentOrParents": null,
|
||||
"_parentSubscriber": [Circular],
|
||||
"_subscriptions": null,
|
||||
"closed": false,
|
||||
"destination": Object {
|
||||
"closed": true,
|
||||
"complete": [Function],
|
||||
"error": [Function],
|
||||
"next": [Function],
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": false,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
"isStopped": false,
|
||||
"syncErrorThrowable": true,
|
||||
"syncErrorThrown": false,
|
||||
"syncErrorValue": null,
|
||||
},
|
||||
],
|
||||
"thrownError": null,
|
||||
}
|
||||
}
|
||||
showAsBar={false}
|
||||
>
|
||||
<EuiLoadingSpinner
|
||||
aria-hidden={true}
|
||||
aria-label="Loading content"
|
||||
className="kbnLoadingIndicator-hidden"
|
||||
data-test-subj="globalLoadingIndicator-hidden"
|
||||
>
|
||||
<span
|
||||
</LoadingIndicator>
|
||||
<ElasticMark
|
||||
aria-hidden={true}
|
||||
aria-label="Loading content"
|
||||
className="euiLoadingSpinner euiLoadingSpinner--medium kbnLoadingIndicator-hidden"
|
||||
data-test-subj="globalLoadingIndicator-hidden"
|
||||
/>
|
||||
</EuiLoadingSpinner>
|
||||
</LoadingIndicator>
|
||||
className="chrHeaderLogo__mark"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
aria-labelledby="elasticMark"
|
||||
className="chrHeaderLogo__mark"
|
||||
fill="none"
|
||||
height="19"
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<title
|
||||
id="elasticMark"
|
||||
>
|
||||
Elastic
|
||||
</title>
|
||||
<path
|
||||
d="M9.74 16.882l.711-.076.046 1.455c-1.879.257-3.485.393-4.818.393-1.773 0-3.03-.515-3.773-1.545C1.164 16.08.8 14.473.8 12.306c0-4.333 1.727-6.5 5.167-6.5 1.666 0 2.909.47 3.727 1.394.818.924 1.227 2.394 1.227 4.379l-.106 1.409H2.664c0 1.364.242 2.379.742 3.03.5.652 1.349.985 2.576.985 1.242.03 2.485-.015 3.757-.121zm-.667-5.349c0-1.515-.243-2.59-.728-3.212-.484-.621-1.272-.94-2.363-.94s-1.924.334-2.47.986c-.545.651-.833 1.712-.848 3.166h6.409zM13.497 18.427V.7h1.848v17.727h-1.848zM27.027 9.806v6.076c0 .621 1.53.742 1.53.742l-.09 1.637c-1.303 0-2.38.106-3.03-.515a10.861 10.861 0 01-4.44.924c-1.136 0-2-.319-2.59-.97-.592-.636-.895-1.56-.895-2.773 0-1.197.303-2.09.91-2.651.605-.56 1.56-.925 2.863-1.046l3.879-.363v-1.06c0-.834-.182-1.44-.546-1.804-.363-.364-.863-.545-1.485-.545H18.27V5.82h4.742c1.394 0 2.41.318 3.046.97.651.636.97 1.651.97 3.015zm-7.606 5.03c0 1.516.621 2.273 1.879 2.273a9.89 9.89 0 003.303-.56l.56-.197v-4.076l-3.65.348c-.743.06-1.274.273-1.607.637-.333.363-.485.894-.485 1.575zM34.255 7.473c-1.788 0-2.697.62-2.697 1.879 0 .575.212.984.62 1.227.41.242 1.35.485 2.819.742 1.47.258 2.5.606 3.106 1.076.606.454.91 1.318.91 2.59 0 1.274-.41 2.198-1.228 2.789-.818.59-2 .894-3.576.894-1.015 0-4.424-.38-4.424-.38l.106-1.605c1.954.182 3.379.333 4.333.333.955 0 1.682-.151 2.182-.454.5-.303.758-.819.758-1.53 0-.713-.212-1.198-.637-1.455-.424-.258-1.363-.5-2.818-.728-1.455-.227-2.485-.56-3.09-1.015-.607-.439-.91-1.272-.91-2.47 0-1.196.424-2.09 1.273-2.666.848-.576 1.909-.864 3.166-.864 1 0 4.485.258 4.485.258v1.621c-1.833-.106-3.333-.242-4.379-.242zM47.952 7.685h-3.925v5.909c0 1.409.106 2.348.303 2.788.212.44.697.666 1.47.666l2.197-.151.121 1.53c-1.106.182-1.94.273-2.515.273-1.288 0-2.167-.318-2.667-.94-.5-.62-.742-1.818-.742-3.575v-6.5h-1.758V6.079h1.758V2.29h1.833v3.773h3.925v1.62zM50.527 3.276V1.139h1.849v2.152l-1.849-.015zm0 15.151V6.08h1.849v12.348h-1.849zM60.406 5.821c.546 0 1.47.106 2.773.303l.59.076-.075 1.5c-1.318-.152-2.288-.227-2.91-.227-1.393 0-2.348.333-2.848 1-.5.666-.757 1.909-.757 3.712 0 1.803.227 3.06.697 3.773.47.712 1.44 1.06 2.924 1.06l2.91-.227.075 1.53c-1.53.227-2.682.349-3.44.349-1.924 0-3.257-.5-3.984-1.485-.728-.985-1.106-2.652-1.106-5 0-2.349.393-4 1.181-4.94.803-.939 2.122-1.424 3.97-1.424z"
|
||||
/>
|
||||
</svg>
|
||||
</ElasticMark>
|
||||
</a>
|
||||
</HeaderLogo>
|
||||
</div>
|
||||
</EuiHeaderSectionItem>
|
||||
</div>
|
||||
|
|
|
|||
34
src/core/public/chrome/ui/header/elastic_mark.tsx
Normal file
34
src/core/public/chrome/ui/header/elastic_mark.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/*
|
||||
* Licensed to Elasticsearch B.V. under one or more contributor
|
||||
* license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright
|
||||
* ownership. Elasticsearch B.V. licenses this file to you under
|
||||
* the Apache License, Version 2.0 (the "License"); you may
|
||||
* not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React, { HTMLAttributes } from 'react';
|
||||
|
||||
export const ElasticMark = ({ ...props }: HTMLAttributes<SVGElement>) => (
|
||||
<svg
|
||||
width="64"
|
||||
height="19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-labelledby="elasticMark"
|
||||
{...props}
|
||||
>
|
||||
<title id="elasticMark">Elastic</title>
|
||||
<path d="M9.74 16.882l.711-.076.046 1.455c-1.879.257-3.485.393-4.818.393-1.773 0-3.03-.515-3.773-1.545C1.164 16.08.8 14.473.8 12.306c0-4.333 1.727-6.5 5.167-6.5 1.666 0 2.909.47 3.727 1.394.818.924 1.227 2.394 1.227 4.379l-.106 1.409H2.664c0 1.364.242 2.379.742 3.03.5.652 1.349.985 2.576.985 1.242.03 2.485-.015 3.757-.121zm-.667-5.349c0-1.515-.243-2.59-.728-3.212-.484-.621-1.272-.94-2.363-.94s-1.924.334-2.47.986c-.545.651-.833 1.712-.848 3.166h6.409zM13.497 18.427V.7h1.848v17.727h-1.848zM27.027 9.806v6.076c0 .621 1.53.742 1.53.742l-.09 1.637c-1.303 0-2.38.106-3.03-.515a10.861 10.861 0 01-4.44.924c-1.136 0-2-.319-2.59-.97-.592-.636-.895-1.56-.895-2.773 0-1.197.303-2.09.91-2.651.605-.56 1.56-.925 2.863-1.046l3.879-.363v-1.06c0-.834-.182-1.44-.546-1.804-.363-.364-.863-.545-1.485-.545H18.27V5.82h4.742c1.394 0 2.41.318 3.046.97.651.636.97 1.651.97 3.015zm-7.606 5.03c0 1.516.621 2.273 1.879 2.273a9.89 9.89 0 003.303-.56l.56-.197v-4.076l-3.65.348c-.743.06-1.274.273-1.607.637-.333.363-.485.894-.485 1.575zM34.255 7.473c-1.788 0-2.697.62-2.697 1.879 0 .575.212.984.62 1.227.41.242 1.35.485 2.819.742 1.47.258 2.5.606 3.106 1.076.606.454.91 1.318.91 2.59 0 1.274-.41 2.198-1.228 2.789-.818.59-2 .894-3.576.894-1.015 0-4.424-.38-4.424-.38l.106-1.605c1.954.182 3.379.333 4.333.333.955 0 1.682-.151 2.182-.454.5-.303.758-.819.758-1.53 0-.713-.212-1.198-.637-1.455-.424-.258-1.363-.5-2.818-.728-1.455-.227-2.485-.56-3.09-1.015-.607-.439-.91-1.272-.91-2.47 0-1.196.424-2.09 1.273-2.666.848-.576 1.909-.864 3.166-.864 1 0 4.485.258 4.485.258v1.621c-1.833-.106-3.333-.242-4.379-.242zM47.952 7.685h-3.925v5.909c0 1.409.106 2.348.303 2.788.212.44.697.666 1.47.666l2.197-.151.121 1.53c-1.106.182-1.94.273-2.515.273-1.288 0-2.167-.318-2.667-.94-.5-.62-.742-1.818-.742-3.575v-6.5h-1.758V6.079h1.758V2.29h1.833v3.773h3.925v1.62zM50.527 3.276V1.139h1.849v2.152l-1.849-.015zm0 15.151V6.08h1.849v12.348h-1.849zM60.406 5.821c.546 0 1.47.106 2.773.303l.59.076-.075 1.5c-1.318-.152-2.288-.227-2.91-.227-1.393 0-2.348.333-2.848 1-.5.666-.757 1.909-.757 3.712 0 1.803.227 3.06.697 3.773.47.712 1.44 1.06 2.924 1.06l2.91-.227.075 1.53c-1.53.227-2.682.349-3.44.349-1.924 0-3.257-.5-3.984-1.485-.728-.985-1.106-2.652-1.106-5 0-2.349.393-4 1.181-4.94.803-.939 2.122-1.424 3.97-1.424z" />
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -112,8 +112,8 @@ export function Header({
|
|||
forceNavigation$={observables.forceAppSwitcherNavigation$}
|
||||
navLinks$={observables.navLinks$}
|
||||
navigateToApp={application.navigateToApp}
|
||||
loadingCount$={observables.loadingCount$}
|
||||
/>,
|
||||
<LoadingIndicator loadingCount$={observables.loadingCount$} />,
|
||||
],
|
||||
borders: 'none',
|
||||
},
|
||||
|
|
|
|||
4
src/core/public/chrome/ui/header/header_logo.scss
Normal file
4
src/core/public/chrome/ui/header/header_logo.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.chrHeaderLogo__mark {
|
||||
margin-left: $euiSizeS;
|
||||
fill: $euiColorGhost;
|
||||
}
|
||||
|
|
@ -17,13 +17,16 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { EuiHeaderLogo } from '@elastic/eui';
|
||||
import './header_logo.scss';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import useObservable from 'react-use/lib/useObservable';
|
||||
import { Observable } from 'rxjs';
|
||||
import Url from 'url';
|
||||
import { ChromeNavLink } from '../..';
|
||||
import { ElasticMark } from './elastic_mark';
|
||||
import { HttpStart } from '../../../http';
|
||||
import { LoadingIndicator } from '../loading_indicator';
|
||||
|
||||
function findClosestAnchor(element: HTMLElement): HTMLAnchorElement | void {
|
||||
let current = element;
|
||||
|
|
@ -90,23 +93,25 @@ interface Props {
|
|||
navLinks$: Observable<ChromeNavLink[]>;
|
||||
forceNavigation$: Observable<boolean>;
|
||||
navigateToApp: (appId: string) => void;
|
||||
loadingCount$?: ReturnType<HttpStart['getLoadingCount$']>;
|
||||
}
|
||||
|
||||
export function HeaderLogo({ href, navigateToApp, ...observables }: Props) {
|
||||
export function HeaderLogo({ href, navigateToApp, loadingCount$, ...observables }: Props) {
|
||||
const forceNavigation = useObservable(observables.forceNavigation$, false);
|
||||
const navLinks = useObservable(observables.navLinks$, []);
|
||||
|
||||
return (
|
||||
<EuiHeaderLogo
|
||||
data-test-subj="logo"
|
||||
iconType="logoElastic"
|
||||
<a
|
||||
onClick={(e) => onClick(e, forceNavigation, navLinks, navigateToApp)}
|
||||
className="euiHeaderLogo"
|
||||
href={href}
|
||||
data-test-subj="logo"
|
||||
aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.goHomePageIconAriaLabel', {
|
||||
defaultMessage: 'Go to home page',
|
||||
defaultMessage: 'Elastic home',
|
||||
})}
|
||||
>
|
||||
Elastic
|
||||
</EuiHeaderLogo>
|
||||
<LoadingIndicator loadingCount$={loadingCount$!} />
|
||||
<ElasticMark className="chrHeaderLogo__mark" aria-hidden={true} />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,10 @@ describe('kbnLoadingIndicator', () => {
|
|||
|
||||
it('is visible when loadingCount is > 0', () => {
|
||||
const wrapper = shallow(<LoadingIndicator loadingCount$={new BehaviorSubject(1)} />);
|
||||
expect(wrapper.prop('data-test-subj')).toBe('globalLoadingIndicator');
|
||||
// Pause the check beyond the 250ms delay that it has
|
||||
setTimeout(() => {
|
||||
expect(wrapper.prop('data-test-subj')).toBe('globalLoadingIndicator');
|
||||
}, 300);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { EuiLoadingSpinner, EuiProgress } from '@elastic/eui';
|
||||
import { EuiLoadingSpinner, EuiProgress, EuiIcon } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
|
@ -39,16 +39,26 @@ export class LoadingIndicator extends React.Component<LoadingIndicatorProps, { v
|
|||
visible: false,
|
||||
};
|
||||
|
||||
private timer: any;
|
||||
private increment = 1;
|
||||
|
||||
componentDidMount() {
|
||||
this.loadingCountSubscription = this.props.loadingCount$.subscribe((count) => {
|
||||
this.setState({
|
||||
visible: count > 0,
|
||||
});
|
||||
if (this.increment > 1) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
this.increment += this.increment;
|
||||
this.timer = setTimeout(() => {
|
||||
this.setState({
|
||||
visible: count > 0,
|
||||
});
|
||||
}, 250);
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.loadingCountSubscription) {
|
||||
clearTimeout(this.timer);
|
||||
this.loadingCountSubscription.unsubscribe();
|
||||
this.loadingCountSubscription = undefined;
|
||||
}
|
||||
|
|
@ -67,13 +77,27 @@ export class LoadingIndicator extends React.Component<LoadingIndicatorProps, { v
|
|||
defaultMessage: 'Loading content',
|
||||
});
|
||||
|
||||
return !this.props.showAsBar ? (
|
||||
const logo = this.state.visible ? (
|
||||
<EuiLoadingSpinner
|
||||
className={className}
|
||||
size="l"
|
||||
data-test-subj={testSubj}
|
||||
aria-hidden={ariaHidden}
|
||||
aria-hidden={false}
|
||||
aria-label={ariaLabel}
|
||||
/>
|
||||
) : (
|
||||
<EuiIcon
|
||||
type="logoElastic"
|
||||
size="l"
|
||||
data-test-subj={testSubj}
|
||||
className="chrHeaderLogo__cluster"
|
||||
aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.logoAriaLabel', {
|
||||
defaultMessage: 'Elastic Logo',
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
||||
return !this.props.showAsBar ? (
|
||||
logo
|
||||
) : (
|
||||
<EuiProgress
|
||||
className={className}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue