add preloader

web/app/components/comment/comment.jsx

@@ -1,13 +1,15 @@
 import { h, Component } from 'preact';
 
 import { vote } from 'common/api';
-import { url, userId } from 'common/settings';
+import { url } from 'common/settings';
+import store from 'common/store';
 
 export default class Comment extends Component {
   constructor(props) {
     super(props);
 
-    const { score, votes } = props.data;
+    const { score = 0, votes = [] } = props.data;
+    const userId = store.get('user').id;
 
     this.state = {
       score: score,

web/app/components/root/_loading/root_loading.scss

@@ -0,0 +1,39 @@
+// TODO: add true preloader
+
+.root_loading {
+  position: relative;
+  height: 3em;
+
+  &::after {
+    content: 'Loading..';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    animation: rootLoading 1s infinite;
+  }
+
+  @keyframes rootLoading {
+    0% {
+      content: 'Loading..';
+    }
+
+    25% {
+      content: 'Loading...';
+    }
+
+    50% {
+      content: 'Loading..';
+    }
+
+    75% {
+      content: 'Loading.';
+    }
+
+    100% {
+      content: 'Loading.';
+    }
+  }
+}

web/app/components/root/index.js

@@ -2,3 +2,5 @@ export { default } from './root';
 
 require('./__input/root__input.scss');
 require('./__thread/root__thread.scss');
+
+require('./_loading/root_loading.scss');

web/app/components/root/root.jsx

@@ -2,6 +2,7 @@ import { h, Component } from 'preact';
 import api from 'common/api';
 
 import { url, id } from 'common/settings';
+import store from 'common/store';
 
 import Input from 'components/input';
 import Thread from 'components/thread';
@@ -14,19 +15,43 @@ export default class Root extends Component {
   }
 
   componentDidMount() {
-    // TODO: add preloader
-    // there must be request for checking auth
-    api.find({ url }).then(({ comments } = {}) => this.setState({ comments }));
+    api.user()
+      .then(data => store.set({ user: data }))
+      .catch(() => store.set({ user: {} }))
+      .finally(() => {
+        api.find({ url })
+          .then(({ comments } = {}) => this.setState({ comments }))
+          .finally(() => this.setState({ loaded: true }));
+      });
   }
 
-  addThread() {
-    // nothing here yet
+  addThread({ text, id }) {
+    const { comments } = this.state;
+
+    const newComments = [{
+      comment: {
+        id,
+        text,
+        user: store.get('user'),
+        time: new Date(),
+      },
+    }].concat(comments);
+
+    this.setState({ comments: newComments });
   }
 
-  render({}, { comments = [], user = {} }) {
+  render({}, { comments = [], user = {}, loaded = false }) {
+    if (!loaded) {
+      return (
+        <div id={id}>
+          <div className="root root_loading"/>
+        </div>
+      );
+    }
+
     return (
-      <div>
-        <div className="root" id={id}>
+      <div id={id}>
+        <div className="root root__loading" id={id}>
           <Input mix="root__input" onSubmit={this.addThread}/>
 
           {