From cd99b1bc1e7fcef597dc9cc3ae8a9f3908cc4026 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sun, 8 Mar 2020 18:47:27 -0400 Subject: [PATCH] Adding comment loading indicator. #519 --- ui/src/components/comment-form.tsx | 80 +++++++++++++++++++++++++----- 1 file changed, 68 insertions(+), 12 deletions(-) diff --git a/ui/src/components/comment-form.tsx b/ui/src/components/comment-form.tsx index f3009d34..6a504592 100644 --- a/ui/src/components/comment-form.tsx +++ b/ui/src/components/comment-form.tsx @@ -1,8 +1,13 @@ import { Component, linkEvent } from 'inferno'; +import { Subscription } from 'rxjs'; +import { retryWhen, delay, take } from 'rxjs/operators'; import { Prompt } from 'inferno-router'; import { CommentNode as CommentNodeI, CommentForm as CommentFormI, + WebSocketJsonResponse, + UserOperation, + CommentResponse, } from '../interfaces'; import { capitalizeFirstLetter, @@ -11,6 +16,7 @@ import { markdownHelpUrl, toast, setupTribute, + wsJsonToRes, } from '../utils'; import { WebSocketService, UserService } from '../services'; import autosize from 'autosize'; @@ -29,12 +35,15 @@ interface CommentFormState { commentForm: CommentFormI; buttonTitle: string; previewMode: boolean; + loading: boolean; imageLoading: boolean; } export class CommentForm extends Component { - private id = `comment-form-${randomStr()}`; + private id = `comment-textarea-${randomStr()}`; + private formId = `comment-form-${randomStr()}`; private tribute: Tribute; + private subscription: Subscription; private emptyState: CommentFormState = { commentForm: { auth: null, @@ -52,6 +61,7 @@ export class CommentForm extends Component { ? capitalizeFirstLetter(i18n.t('edit')) : capitalizeFirstLetter(i18n.t('reply')), previewMode: false, + loading: false, imageLoading: false, }; @@ -72,6 +82,14 @@ export class CommentForm extends Component { this.state.commentForm.parent_id = this.props.node.comment.id; } } + + this.subscription = WebSocketService.Instance.subject + .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) + .subscribe( + msg => this.parseMessage(msg), + err => console.error(err), + () => console.log('complete') + ); } componentDidMount() { @@ -85,6 +103,10 @@ export class CommentForm extends Component { }); } + componentWillUnmount() { + this.subscription.unsubscribe(); + } + render() { return (
@@ -92,7 +114,10 @@ export class CommentForm extends Component { when={this.state.commentForm.content} message={i18n.t('block_leaving')} /> -
+