UI (#15)

Adding new Admin UI. Updating Fredy to V3.0.0 as it has been a large rewrite. Thanks for all contributions and help on the way!

ui/src/components/placeholder/Placeholder.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import './Placeholder.less';
+
+function getPlaceholder(rowCount, className) {
+  const rows = [];
+  for (let i = 0; i < rowCount; i++) {
+    rows.push(<div className="place__line" key={i} />);
+  }
+  const clazz = `place ${className == null ? '' : className}`;
+  return (
+    <div className={clazz}>
+      <div className="place__circle" />
+      <div className="place__place_lines_wrapper">{rows}</div>
+    </div>
+  );
+}
+
+export default function Placeholder({ rows = 3, ready = false, children, customPlaceholder, className }) {
+  if (!ready) {
+    if (customPlaceholder != null) {
+      return customPlaceholder;
+    }
+
+    return getPlaceholder(rows, className);
+  }
+
+  return children;
+}

ui/src/components/placeholder/Placeholder.less

@@ -0,0 +1,36 @@
+.place {
+  height: 100%;
+  width: 100%;
+  display:flex;
+
+  &__place_lines_wrapper{
+    width:100%;
+  }
+
+  &__line {
+    height: 10px;
+    margin: 10px;
+    animation: pulse 1s infinite ease-in-out;
+  }
+
+  &__circle {
+    height: 4rem;
+    width: 5rem;
+    margin: 10px;
+    border-radius: 360px;
+    animation: pulse 1s infinite ease-in-out;
+  }
+
+}
+
+@keyframes pulse {
+  0% {
+    background-color: rgba(165, 165, 165, 0.1)
+  }
+  50% {
+    background-color: rgba(165, 165, 165, 0.3)
+  }
+  100% {
+    background-color: rgba(165, 165, 165, 0.1)
+  }
+}