diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index cbe58725c..8809c5b74 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -56,6 +56,8 @@ interface CommentNodeState { upvotes: number; downvotes: number; borderColor: string; + readLoading: boolean; + saveLoading: boolean; } interface CommentNodeProps { @@ -97,6 +99,8 @@ export class CommentNode extends Component { borderColor: this.props.node.comment.depth ? colorList[this.props.node.comment.depth % colorList.length] : colorList[0], + readLoading: false, + saveLoading: false, }; constructor(props: any, context: any) { @@ -113,6 +117,8 @@ export class CommentNode extends Component { this.state.upvotes = nextProps.node.comment.upvotes; this.state.downvotes = nextProps.node.comment.downvotes; this.state.score = nextProps.node.comment.score; + this.state.readLoading = false; + this.state.saveLoading = false; this.setState(this.state); } @@ -255,12 +261,16 @@ export class CommentNode extends Component { : i18n.t('mark_as_read') } > - - - + {this.state.readLoading ? ( + this.loadingIcon + ) : ( + + + + )} )} @@ -305,6 +315,28 @@ export class CommentNode extends Component { )} +
  • + +
  • -
  • - - - - - -
  • + {this.props.markable && this.linkBtn} {!this.state.showAdvanced ? (
  • )} -
  • - -
  • + {!this.props.markable && this.linkBtn}
  • -
  • - +
  • )} {this.mine && ( <> -
  • - +
  • -
  • - +
  • )} -
  • - +