Add a settings skeleton

common/app/components/SK-Wave.jsx

@@ -1,19 +0,0 @@
-import React, { PureComponent } from 'react';
-
-const propTypes = {
-};
-export default class SKWave extends PureComponent {
-  render() {
-    return (
-      <div className='sk-wave'>
-        <div />
-        <div />
-        <div />
-        <div />
-        <div />
-      </div>
-    );
-  }
-}
-SKWave.displayName = 'SKWave';
-SKWave.propTypes = propTypes;

common/app/routes/index.less

@@ -1 +1,2 @@
 &{ @import "./challenges/challenges.less"; }
+&{ @import "./settings/settings.less"; }

common/app/routes/settings/components/Settings.jsx

@@ -9,7 +9,7 @@ import LockedSettings from './Locked-Settings.jsx';
 import SocialSettings from './Social-Settings.jsx';
 import EmailSettings from './Email-Setting.jsx';
 import LanguageSettings from './Language-Settings.jsx';
-import SKWave from '../../../components/SK-Wave.jsx';
+import SettingsSkeleton from './SettingsSkeleton.jsx';
 
 
 import { toggleUserFlag } from '../redux/actions.js';
@@ -115,7 +115,7 @@ export class Settings extends React.Component {
       toggleNotificationEmail
     } = this.props;
     if (!username && !showLoading) {
-      return <SKWave />;
+      return <SettingsSkeleton />;
     }
     if (children) {
       return (

common/app/routes/settings/components/SettingsSkeleton.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Button, Row, Col } from 'react-bootstrap';
+
+import ns from '../ns.json';
+
+// actual chars required to give buttons some height
+// whitespace alone is no good
+const placeholderString = (
+  <span className='placeholder-string'>
+    placeholder text of 28 chars
+  </span>
+);
+const shortString = (
+  <span className='placeholder-string'>
+    placeholder
+  </span>
+);
+
+
+export default function SettingsSkeleton() {
+  return (
+    <div className={ `${ns}-skeleton` }>
+      <Row>
+        <Col xs={ 12 }>
+          <Button
+            block={ true }
+            bsSize='lg'
+            className='btn-link-social'
+            >
+            { placeholderString }
+          </Button>
+          <Button
+            block={ true }
+            bsSize='lg'
+            className='btn-link-social'
+            >
+            { placeholderString }
+          </Button>
+          <Button
+            block={ true }
+            bsSize='lg'
+            className='btn-link-social'
+            >
+            { placeholderString }
+          </Button>
+        </Col>
+      </Row>
+      <h1 className='text-center'>{ placeholderString }</h1>
+      <h2 className='text-center'>{ shortString }</h2>
+      <Row>
+        <Col xs={ 12 }>
+          <Button
+            block={ true }
+            bsSize='lg'
+            className='btn-link-social'
+            >
+            { placeholderString }
+          </Button>
+          <Button
+            block={ true }
+            bsSize='lg'
+            className='btn-link-social'
+            >
+            { placeholderString }
+          </Button>
+          <Button
+            block={ true }
+            bsSize='lg'
+            className='btn-link-social'
+            >
+            { placeholderString }
+          </Button>
+          <Button
+            block={ true }
+            bsSize='lg'
+            className='btn-link-social'
+            >
+            { placeholderString }
+          </Button>
+        </Col>
+      </Row>
+      <div className='spacer' />
+      <h2 className='text-center'>{ placeholderString }</h2>
+      <Row>
+          <Col xs={ 12 }>
+            <Button
+              block={ true }
+              bsSize='lg'
+            className='btn-link-social'
+            >
+            { placeholderString }
+            </Button>
+          </Col>
+        </Row>
+        <div className='spacer' />
+        <h2 className='text-center'>{ placeholderString }</h2>
+    </div>
+  );
+}

common/app/routes/settings/ns.json

@@ -0,0 +1 @@
+"settings"

common/app/routes/settings/settings.less

@@ -0,0 +1,37 @@
+// should be the same as the filename and ./ns.json
+@ns: settings;
+
+@skeleton-gray: #b0bdb7;
+
+@keyframes pulsingOverlay {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+
+.@{ns}-skeleton {
+  background-color: #fff;
+  z-index: 10;
+  animation-name:  pulsingOverlay;
+  animation-duration: 2.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: normal;
+
+  .placeholder-string {
+    background-color: @skeleton-gray;
+    box-shadow: 0px 0px 12px 6px @skeleton-gray;
+    color: @skeleton-gray;
+  }
+  .btn-link-social {
+    background-color: @skeleton-gray;
+    border-color: @skeleton-gray;
+    box-shadow: 0px 0px 12px 6px @skeleton-gray;
+  }
+}