From c30ecc1b81f3b704e0e32b46d2b084d9fad8e0be Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Mon, 26 Dec 2022 13:54:35 +0600
Subject: [PATCH] fixed comment loader animation

---
 src/components/node/NodeNoComments/index.tsx  | 17 ++++++----
 .../node/NodeNoComments/styles.module.scss    | 11 ++++++-
 src/containers/boris/BorisComments/index.tsx  | 32 +++++++++----------
 src/containers/node/NodeBottomBlock/index.tsx | 24 +++++++++++---
 4 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/src/components/node/NodeNoComments/index.tsx b/src/components/node/NodeNoComments/index.tsx
index 3ae20562..11db8302 100644
--- a/src/components/node/NodeNoComments/index.tsx
+++ b/src/components/node/NodeNoComments/index.tsx
@@ -9,20 +9,25 @@ import { t } from '~/utils/trans';
 import styles from './styles.module.scss';
 
 interface IProps {
-  is_loading?: boolean;
+  loading?: boolean;
   count?: number;
 }
 
-const NodeNoComments: FC<IProps> = ({ is_loading = false, count = 3 }) => {
+const NodeNoComments: FC<IProps> = ({ loading = false, count = 3 }) => {
   const items = useMemo(
-    () => [...new Array(count)].map((_, i) => <div className={styles.card} key={i} />),
-    [count]
+    () =>
+      [...new Array(count)].map((_, i) => (
+        <div className={styles.card} key={i} />
+      )),
+    [count],
   );
 
   return (
-    <Group className={classNames(styles.wrap, { is_loading })}>
+    <Group className={classNames(styles.wrap, { [styles.loading]: loading })}>
       {items}
-      {!is_loading && <div className={styles.nothing}>{t(ERRORS.NO_COMMENTS)}</div>}
+      {!loading && (
+        <div className={styles.nothing}>{t(ERRORS.NO_COMMENTS)}</div>
+      )}
     </Group>
   );
 };
diff --git a/src/components/node/NodeNoComments/styles.module.scss b/src/components/node/NodeNoComments/styles.module.scss
index cdae439c..3b350569 100644
--- a/src/components/node/NodeNoComments/styles.module.scss
+++ b/src/components/node/NodeNoComments/styles.module.scss
@@ -1,5 +1,14 @@
 @import 'src/styles/variables';
 
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.3;
+  }
+}
+
 .wrap {
   user-select: none;
   overflow: hidden;
@@ -17,7 +26,7 @@
     bottom: 0;
   }
 
-  &:global(.is_loading) {
+  &.loading {
     opacity: 1;
 
     .card {
diff --git a/src/containers/boris/BorisComments/index.tsx b/src/containers/boris/BorisComments/index.tsx
index b0052db2..7f17df1f 100644
--- a/src/containers/boris/BorisComments/index.tsx
+++ b/src/containers/boris/BorisComments/index.tsx
@@ -17,27 +17,27 @@ const BorisComments: FC<IProps> = () => {
   const user = useUserContext();
   const { isUser } = useAuth();
 
-  const {
-    isLoading,
-    comments,
-    onSaveComment,
-  } = useCommentContext();
+  const { isLoading, comments, onSaveComment } = useCommentContext();
   const { node } = useNodeContext();
 
   return (
-      <Group>
-        {(isUser || isSSR) && (
-          <NodeCommentFormSSR user={user} nodeId={node.id} saveComment={onSaveComment} />
-        )}
+    <Group>
+      {(isUser || isSSR) && (
+        <NodeCommentFormSSR
+          user={user}
+          nodeId={node.id}
+          saveComment={onSaveComment}
+        />
+      )}
 
-        {isLoading || !comments?.length ? (
-          <NodeNoComments is_loading count={7} />
-        ) : (
-          <NodeComments order="ASC" />
-        )}
+      {isLoading || !comments?.length ? (
+        <NodeNoComments loading count={7} />
+      ) : (
+        <NodeComments order="ASC" />
+      )}
 
-        <Footer />
-      </Group>
+      <Footer />
+    </Group>
   );
 };
 
diff --git a/src/containers/node/NodeBottomBlock/index.tsx b/src/containers/node/NodeBottomBlock/index.tsx
index 5532cf44..6553b7f7 100644
--- a/src/containers/node/NodeBottomBlock/index.tsx
+++ b/src/containers/node/NodeBottomBlock/index.tsx
@@ -26,7 +26,11 @@ interface IProps {
 const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
   const user = useUserContext();
   const { node, isLoading } = useNodeContext();
-  const { comments, isLoading: isLoadingComments, onSaveComment } = useCommentContext();
+  const {
+    comments,
+    isLoading: isLoadingComments,
+    onSaveComment,
+  } = useCommentContext();
   const { related, isLoading: isLoadingRelated } = useNodeRelatedContext();
   const { inline } = useNodeBlocks(node, isLoading);
   const { isUser } = useAuthProvider();
@@ -43,15 +47,21 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
             {inline && <div className={styles.inline}>{inline}</div>}
 
             <article>
-              {isLoading || isLoadingComments || (!comments.length && !inline) ? (
-                <NodeNoComments is_loading={isLoadingComments || isLoading} />
+              {isLoading ||
+              isLoadingComments ||
+              (!comments.length && !inline) ? (
+                <NodeNoComments loading={isLoadingComments || isLoading} />
               ) : (
                 <NodeComments order={commentsOrder} />
               )}
             </article>
 
             {isUser && !isLoading && (
-              <NodeCommentFormSSR nodeId={node.id} saveComment={onSaveComment} user={user} />
+              <NodeCommentFormSSR
+                nodeId={node.id}
+                saveComment={onSaveComment}
+                user={user}
+              />
             )}
           </Group>
 
@@ -66,7 +76,11 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
                   <NodeTagsBlock />
                 </div>
                 <div className={styles.left_item}>
-                  <NodeRelatedBlock isLoading={isLoadingRelated} node={node} related={related} />
+                  <NodeRelatedBlock
+                    isLoading={isLoadingRelated}
+                    node={node}
+                    related={related}
+                  />
                 </div>
               </Sticky>
             </div>