add loading placeholders

This commit is contained in:
Skip R. 2018-07-13 18:43:10 -07:00
parent 0a1f002927
commit edf1a07b68
No known key found for this signature in database
GPG key ID: 1508C19D7436A26D
5 changed files with 74 additions and 2 deletions

View file

@ -9014,6 +9014,14 @@
}
}
},
"react-placeholder": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/react-placeholder/-/react-placeholder-3.0.1.tgz",
"integrity": "sha512-FMTAMBDn5ozWWBeS//QmGenaAy2qYeCytlC7s6DG+NL/TYOu5C33CkrysXgqv4LZ18dgKKspo0BekeACkWfV/w==",
"requires": {
"prop-types": "^15.6.0"
}
},
"react-scripts": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz",

View file

@ -7,6 +7,7 @@
"ms": "^2.1.1",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-placeholder": "^3.0.1",
"react-scripts": "1.1.4"
},
"scripts": {

View file

@ -1,8 +1,8 @@
import React, { Component } from 'react';
import Service from './Service.js';
import ServicePlaceholder from './ServicePlaceholder.js';
import './App.css';
import OP from './ws/op.js';
const log = (...args) => {
@ -131,11 +131,16 @@ export default class App extends Component {
</div>
);
return (
<div className="dashboard">
<h1>elstatus</h1>
{this.state.loading ? (
<div>Loading metrics...</div>
<React.Fragment>
<ServicePlaceholder />
<ServicePlaceholder />
<ServicePlaceholder />
</React.Fragment>
) : null}
{this.state.error ? (
<div>Error: {this.state.error}</div>

View file

@ -0,0 +1,9 @@
.service-placeholder {
margin-bottom: 2rem;
}
.service-placeholder .title {
display: grid;
grid-template-columns: 3rem 1fr;
grid-gap: 1rem;
}

View file

@ -0,0 +1,49 @@
import React from 'react';
import ReactPlaceholder from 'react-placeholder';
import 'react-placeholder/lib/reactPlaceholder.css';
import './ServicePlaceholder.css';
const ServicePlaceholder = () => (
<div className="service-placeholder">
<div className="title">
<ReactPlaceholder
type="round"
ready={false}
style={{ width: '3rem', height: '3rem' }}
className="emoji"
showLoadingAnimation
>
{' '}
</ReactPlaceholder>
<ReactPlaceholder
type="rect"
ready={false}
style={{ width: '100%', height: '3rem' }}
showLoadingAnimation
>
{' '}
</ReactPlaceholder>
</div>
<ReactPlaceholder
type="text"
ready={false}
rows={1}
style={{ marginTop: '1rem' }}
showLoadingAnimation
>
{' '}
</ReactPlaceholder>
<ReactPlaceholder
type="rect"
ready={false}
style={{ width: '100%', height: '6rem', marginTop: '1rem' }}
showLoadingAnimation
>
{' '}
</ReactPlaceholder>
</div>
);
export default ServicePlaceholder;