Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add loading spinner to filter bar

pull/3651/head
Alex P 2018-06-12 10:15:43 -07:00 committed by Brandon Farmer
parent b9d1f218e9
commit ddc6c73f6b
2 changed files with 38 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/logs/components/QueryResults.tsx
View File

@ -8,8 +8,14 @@ interface Props {
class QueryResults extends PureComponent<Props> { class QueryResults extends PureComponent<Props> {
public render() { public render() {
const {count} = this.props const {count} = this.props
if (this.isPending) { if (this.isPending) {
return <label className="logs-viewer--results-text">Querying ...</label> return (
<>
<div className="logs-viewer--results-spinner" />
<label className="logs-viewer--results-text">Querying...</label>
</>
)
} }
return ( return (

34
ui/src/style/pages/logs-viewer.scss
View File

@ -6,6 +6,7 @@
$logs-viewer-graph-height: 180px; $logs-viewer-graph-height: 180px;
$logs-viewer-search-height: 46px; $logs-viewer-search-height: 46px;
$logs-viewer-filter-height: 42px; $logs-viewer-filter-height: 42px;
$logs-viewer-results-text-indent: 33px;
$logs-viewer-gutter: 60px; $logs-viewer-gutter: 60px;
.logs-viewer { .logs-viewer {
@ -77,19 +78,46 @@ $logs-viewer-gutter: 60px;
padding: 0 $logs-viewer-gutter; padding: 0 $logs-viewer-gutter;
height: $logs-viewer-filter-height; height: $logs-viewer-filter-height;
background-color: $g3-castle; background-color: $g3-castle;
position: relative;
} }
.logs-viewer--results-text { .logs-viewer--results-text {
margin: 0 12px 0 33px; margin: 0 12px 0 $logs-viewer-results-text-indent;
padding: 0; padding: 0;
font-size: 13px; font-size: 13px;
line-height: 13px; line-height: 13px;
font-weight: 500; font-weight: 600;
color: $g9-mountain; color: $g9-mountain;
transition: color 0.25s ease;
strong { strong {
color: $g15-platinum; color: $g15-platinum;
font-weight: 700; font-weight: 900;
}
}
@keyframes resultsSpinner {
0% {
transform: translateY(-50%) rotate(0deg);
}
100% {
transform: translateY(-50%) rotate(360deg);
}
}
.logs-viewer--results-spinner {
position: absolute;
top: 50%;
left: $logs-viewer-gutter + 8px;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid $c-pool;
border-bottom-color: transparent;
animation: resultsSpinner 0.75s linear infinite;
& + .logs-viewer--results-text {
color: $c-pool;
} }
} }