From 31e99792859152fd1a5fc7ca573da0f2805da44e Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Tue, 10 Apr 2018 15:31:04 +0100
Subject: [PATCH 1/2] Add 500ms delay to show `membershipBusy` for longer
to avoid a UI that flashes quickly
---
src/components/structures/GroupView.js | 23 +++++++++++++++++++----
1 file changed, 19 insertions(+), 4 deletions(-)
diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index e725483d29..0a85c5e7ab 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -670,8 +670,12 @@ export default React.createClass({
});
},
- _onAcceptInviteClick: function() {
+ _onAcceptInviteClick: async function() {
this.setState({membershipBusy: true});
+
+ // Wait 500ms to prevent flashing
+ await Promise.delay(500);
+
this._groupStore.acceptGroupInvite().then(() => {
// don't reset membershipBusy here: wait for the membership change to come down the sync
}).catch((e) => {
@@ -684,8 +688,12 @@ export default React.createClass({
});
},
- _onRejectInviteClick: function() {
+ _onRejectInviteClick: async function() {
this.setState({membershipBusy: true});
+
+ // Wait 500ms to prevent flashing
+ await Promise.delay(500);
+
this._groupStore.leaveGroup().then(() => {
// don't reset membershipBusy here: wait for the membership change to come down the sync
}).catch((e) => {
@@ -698,9 +706,12 @@ export default React.createClass({
});
},
- _onJoinClick: function() {
+ _onJoinClick: async function() {
this.setState({membershipBusy: true});
+ // Wait 500ms to prevent flashing
+ await Promise.delay(500);
+
this._groupStore.joinGroup().then(() => {
// don't reset membershipBusy here: wait for the membership change to come down the sync
}).catch((e) => {
@@ -720,10 +731,14 @@ export default React.createClass({
description: _t("Leave %(groupName)s?", {groupName: this.props.groupId}),
button: _t("Leave"),
danger: true,
- onFinished: (confirmed) => {
+ onFinished: async (confirmed) => {
if (!confirmed) return;
this.setState({membershipBusy: true});
+
+ // Wait 500ms to prevent flashing
+ await Promise.delay(500);
+
this._groupStore.leaveGroup().then(() => {
// don't reset membershipBusy here: wait for the membership change to come down the sync
}).catch((e) => {
From fca7325b2005f8216238b2c9788256c30457a092 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Tue, 10 Apr 2018 15:56:57 +0100
Subject: [PATCH 2/2] Change comments
---
src/components/structures/GroupView.js | 12 ++++++++----
1 file changed, 8 insertions(+), 4 deletions(-)
diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 0a85c5e7ab..62fdb1070a 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -673,7 +673,8 @@ export default React.createClass({
_onAcceptInviteClick: async function() {
this.setState({membershipBusy: true});
- // Wait 500ms to prevent flashing
+ // Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
+ // spinner disappearing after we have fetched new group data.
await Promise.delay(500);
this._groupStore.acceptGroupInvite().then(() => {
@@ -691,7 +692,8 @@ export default React.createClass({
_onRejectInviteClick: async function() {
this.setState({membershipBusy: true});
- // Wait 500ms to prevent flashing
+ // Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
+ // spinner disappearing after we have fetched new group data.
await Promise.delay(500);
this._groupStore.leaveGroup().then(() => {
@@ -709,7 +711,8 @@ export default React.createClass({
_onJoinClick: async function() {
this.setState({membershipBusy: true});
- // Wait 500ms to prevent flashing
+ // Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
+ // spinner disappearing after we have fetched new group data.
await Promise.delay(500);
this._groupStore.joinGroup().then(() => {
@@ -736,7 +739,8 @@ export default React.createClass({
this.setState({membershipBusy: true});
- // Wait 500ms to prevent flashing
+ // Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
+ // spinner disappearing after we have fetched new group data.
await Promise.delay(500);
this._groupStore.leaveGroup().then(() => {