From f23b9166e1f81b2111daeb2d6af9766bbbf37ae6 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 15 Nov 2019 12:03:57 +0700
Subject: [PATCH] fixed boris flickering on load

---
 src/containers/node/BorisLayout/index.tsx   | 46 ++++++++++++---------
 src/containers/node/BorisLayout/styles.scss |  8 +++-
 src/index.tsx                               |  1 -
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/containers/node/BorisLayout/index.tsx b/src/containers/node/BorisLayout/index.tsx
index 33076dfc..ec006ec6 100644
--- a/src/containers/node/BorisLayout/index.tsx
+++ b/src/containers/node/BorisLayout/index.tsx
@@ -1,20 +1,20 @@
-import React, { FC, useEffect } from 'react';
-import { RouteComponentProps } from 'react-router';
-import * as NODE_ACTIONS from '~/redux/node/actions';
-import { selectNode } from '~/redux/node/selectors';
-import { selectUser } from '~/redux/auth/selectors';
-import { connect } from 'react-redux';
-import { NodeComments } from '~/components/node/NodeComments';
-import styles from './styles.scss';
-import { CommentForm } from '~/components/node/CommentForm';
-import { Group } from '~/components/containers/Group';
-import boris from '~/sprites/boris_robot.svg';
-import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { getRandomPhrase } from '~/constants/phrases';
+import React, { FC, useEffect } from "react";
+import { RouteComponentProps } from "react-router";
+import * as NODE_ACTIONS from "~/redux/node/actions";
+import { selectNode } from "~/redux/node/selectors";
+import { selectUser } from "~/redux/auth/selectors";
+import { connect } from "react-redux";
+import { NodeComments } from "~/components/node/NodeComments";
+import styles from "./styles.scss";
+import { CommentForm } from "~/components/node/CommentForm";
+import { Group } from "~/components/containers/Group";
+import boris from "~/sprites/boris_robot.svg";
+import { NodeNoComments } from "~/components/node/NodeNoComments";
+import { getRandomPhrase } from "~/constants/phrases";
 
 const mapStateToProps = state => ({
   node: selectNode(state),
-  user: selectUser(state),
+  user: selectUser(state)
 });
 
 const mapDispatchToProps = {
@@ -23,7 +23,7 @@ const mapDispatchToProps = {
   nodeSetCoverImage: NODE_ACTIONS.nodeSetCoverImage,
   nodeEdit: NODE_ACTIONS.nodeEdit,
   nodeLike: NODE_ACTIONS.nodeLike,
-  nodeStar: NODE_ACTIONS.nodeStar,
+  nodeStar: NODE_ACTIONS.nodeStar
 };
 
 type IProps = ReturnType<typeof mapStateToProps> &
@@ -33,15 +33,21 @@ type IProps = ReturnType<typeof mapStateToProps> &
 const id = 696;
 
 const BorisLayoutUnconnected: FC<IProps> = ({
-  node: { is_loading, is_loading_comments, comments = [], current: node, related },
+  node: {
+    is_loading,
+    is_loading_comments,
+    comments = [],
+    current: node,
+    related
+  },
   user: { is_user },
-  nodeLoadNode,
+  nodeLoadNode
 }) => {
-  const title = getRandomPhrase('BORIS_TITLE');
+  const title = getRandomPhrase("BORIS_TITLE");
 
   useEffect(() => {
     if (is_loading) return;
-    nodeLoadNode(id, 'DESC');
+    nodeLoadNode(id, "DESC");
   }, [nodeLoadNode, id]);
 
   return (
@@ -81,7 +87,7 @@ const BorisLayoutUnconnected: FC<IProps> = ({
         <Group className={styles.content}>
           {is_user && <CommentForm id={0} />}
 
-          {is_loading_comments ? (
+          {is_loading_comments && !comments.length ? (
             <NodeNoComments is_loading />
           ) : (
             <NodeComments comments={comments} />
diff --git a/src/containers/node/BorisLayout/styles.scss b/src/containers/node/BorisLayout/styles.scss
index a6a7eb58..d41db6c8 100644
--- a/src/containers/node/BorisLayout/styles.scss
+++ b/src/containers/node/BorisLayout/styles.scss
@@ -33,7 +33,7 @@
   width: 100%;
   height: 100vh;
   overflow: hidden;
-  background: 50% 0% no-repeat/cover url('~/sprites/boris_bg.svg');
+  background: 50% 0% no-repeat/cover url("~/sprites/boris_bg.svg");
 }
 
 .header {
@@ -86,8 +86,14 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  padding-bottom: 33.333%;
+  position: relative;
+  width: 100%;
 
   img {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
   }
 
diff --git a/src/index.tsx b/src/index.tsx
index 835daf5d..d33991a2 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -20,7 +20,6 @@ render(
 
 /*
 
-- fix: boris should not show "loading comments" if there's any comments loaded
 - fix: text nodes cell not clickable
 - fix: text nodes cell has no preview
 - fix: user receives his own notifications :-(