fix first comment on claim not showing instantly

ui/component/commentsList/view.jsx

@@ -102,14 +102,13 @@ function CommentList(props: Props) {
               displayedComments &&
               displayedComments.map(comment => {
                 return (
-                  <>
+                  <React.Fragment key={comment.comment_id}>
                     <Comment
                       uri={uri}
                       authorUri={comment.channel_url}
                       author={comment.channel_name}
                       claimId={comment.claim_id}
                       commentId={comment.comment_id}
-                      key={comment.comment_id}
                       message={comment.comment}
                       parentId={comment.parent_id || null}
                       timePosted={comment.timestamp * 1000}
@@ -117,13 +116,8 @@ function CommentList(props: Props) {
                       commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
                       linkedComment={linkedComment}
                     />
-                    <CommentsReplies
-                      uri={uri}
-                      parentId={comment.comment_id}
-                      linkedComment={linkedComment}
-                      key={comment.comment_id + 'replies'}
-                    />
-                  </>
+                    <CommentsReplies uri={uri} parentId={comment.comment_id} linkedComment={linkedComment} />
+                  </React.Fragment>
                 );
               })}
           </ul>

ui/redux/actions/comments.js

@@ -83,11 +83,11 @@ export function doCommentCreate(
             uri,
             comment: result,
             claimId: claim_id,
+            uri,
           },
         });
       })
       .catch(error => {
-        console.log('error', error);
         dispatch({
           type: ACTIONS.COMMENT_CREATE_FAILED,
           data: error,

ui/redux/reducers/comments.js

@@ -31,6 +31,7 @@ export default handleActions(
       const byId = Object.assign({}, state.byId);
       const topLevelCommentsById = Object.assign({}, state.topLevelCommentsById); // was byId {ClaimId -> [commentIds...]}
       const repliesByParentId = Object.assign({}, state.repliesByParentId); // {ParentCommentID -> [commentIds...] } list of reply comments
+      const commentsByUri = Object.assign({}, state.commentsByUri);
       const comments = byId[claimId] || [];
       const newCommentIds = comments.slice();
       const commentsByUri = Object.assign({}, state.commentsByUri);

ui/redux/selectors/comments.js

@@ -150,6 +150,10 @@ export const makeSelectTopLevelCommentsForUri = (uri: string) =>
 
       return comments
         ? comments.filter(comment => {
+            if (!comment) {
+              return false;
+            }
+
             const channelClaim = claimsById[comment.channel_id];
 
             // Return comment if `channelClaim` doesn't exist so the component knows to resolve the author

ui/scss/component/_notification.scss

@@ -77,9 +77,8 @@
 }
 
 .notification__time {
-  @extend .help;
-  margin-bottom: 0;
-  margin-top: 0;
+  font-size: var(--font-small);
+  color: var(--color-text-help);
   margin-left: var(--spacing-s);
   flex-shrink: 0;
 }