add loading placeholders

priv/frontend/package-lock.json

@@ -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",

priv/frontend/package.json

@@ -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": {

priv/frontend/src/App.js

@@ -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>

priv/frontend/src/ServicePlaceholder.css

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

priv/frontend/src/ServicePlaceholder.js

@@ -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;